当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - create table in mdDialog with editable data as json

问题描述:

I'm trying to create dialog with json data.

 $scope.showAttributeData = function(data) {

$scope.feature = data

console.log($scope.feature)

var that = this;

var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && that.customFullscreen;

$mdDialog.show({

locals: {

feature: $scope.feature

},

controller: attributeDialogController,

controllerAs: 'attributeDialog',

templateUrl: 'attribute-dialog.template.html',

parent: angular.element(document.body),

clickOutsideToClose: true,

hasBackdrop: false,

fullscreen: useFullScreen,

openFrom: angular.element(document.querySelector('#left')),

closeTo: angular.element(document.querySelector('#left'))

});

$scope.$watch(function() {

return $mdMedia('xs') || $mdMedia('sm');

}, function(wantsFullScreen) {

return that.customFullscreen = wantsFullScreen === true;

});

};

but in tempalte data does not reder. It is look like template didn't catch data from controller.

 <script type="text/ng-template" id="attribute-dialog.template.html">

<md-dialog id="attribute-dialog">

<md-toolbar>

<div class="md-toolbar-tools">

<h2>Attribut info</h2>

<span flex></span>

<md-button class="md-icon-button" ng-click="attributeDialog.close()">

<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>

</md-button>

</div>

</md-toolbar>

<md-dialog-content>

<div class="md-dialog-content">

<table>

<thead>

<tr>

<th>Attr</th>

<th>Value</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="(key, value) in feature">

<td> {{key}} </td>

<td>

<input type="text" ng-model="feature[key]"/>

</td>

</tr>

</tbody>

</table>

</div>

</md-dialog-content>

<md-dialog-actions layout="row">

<span flex></span>

<md-button type="submit" ng-click="attributeDialog.close()" class="md-raised md-primary">ОК</md-button>

</md-dialog-actions>

</md-dialog>

</script>

So, what it can be?

Also, dialog template is rather new, as controller. In future, I will add editable information with ng-model. And, may be somebody know, how it crete correctly?

I'm pass info from leaflet map

mainLayer.eachLayer(function(layer) {

layer.on({

click: function() {

var scope = angular.element($("#main")).scope().showAttributeData(layer.feature.properties);

},

});

});

Also, I started to learn angular week ago, and if you notice some error or wrong writing of code, please, write them))

网友答案:

I've created a test example to help you using your markup - CodePen

Markup

<div ng-controller="MyController as vm" ng-cloak="" ng-app="app">
  <md-button class="md-primary md-raised" ng-click="vm.open($event)">
    Custom Dialog
  </md-button>

  <script type="text/ng-template" id="test.html">
        <md-dialog id="attribute-dialog">
        <md-toolbar>
          <div class="md-toolbar-tools">
            <h2>Attribut info</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="attributeDialog.close()">
              <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
            </md-button>
          </div>
        </md-toolbar>
        <md-dialog-content>
          <div class="md-dialog-content">
            <table>
              <thead>
                <tr>
                  <th>Attr</th>
                  <th>Value</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="(key, value) in feature">
                  <td> {{key}} </td>
                  <td>
                    <input type="text" ng-model="feature[key]"/>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </md-dialog-content>
        <md-dialog-actions layout="row">
          <span flex></span>
          <md-button type="submit" ng-click="attributeDialog.close()" class="md-raised md-primary">ОК</md-button>
        </md-dialog-actions>
      </md-dialog>
  </script>
</div>

JS

angular.module('app',['ngMaterial'])

.controller('MyController', function($scope, $mdDialog) {
  this.open = function(ev) {
    $scope.feature = {
      blah: "blah",
      yah: "yah"
    }
    $mdDialog.show(
      {
        templateUrl: "test.html",
        clickOutsideToClose: true,
        scope: $scope,
        preserveScope: true,
        controller: function($scope) {
       },
    });
  };
})
网友答案:

Try by put target event :

 $scope.showAttributeData = function(data,ev) {
    $scope.feature = data
    console.log($scope.feature)
    var that = this;
    var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && that.customFullscreen;
    $mdDialog.show({
            locals: {
                feature: $scope.feature
            },
            controller: attributeDialogController,
            controllerAs: 'attributeDialog',
            templateUrl: 'attribute-dialog.template.html',
            targetEvent: ev,
            parent: angular.element(document.body),
            clickOutsideToClose: true,
            hasBackdrop: false,
            fullscreen: useFullScreen,
            openFrom: angular.element(document.querySelector('#left')),
            closeTo: angular.element(document.querySelector('#left'))
        })
        .then(function(credentials) {
            return that.showToast("Добро пожаловать, " + credentials.username + ".");
        });
    $scope.$watch(function() {
        return $mdMedia('xs') || $mdMedia('sm');
    }, function(wantsFullScreen) {
        return that.customFullscreen = wantsFullScreen === true;
    });
};
分享给朋友:
您可能感兴趣的文章:
随机阅读: