Triple -B Triple -B - 28 days ago 12
Javascript Question

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))

Answer

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) {
       },
    });
  };
})