Question

我正在开发一个MEAN堆栈应用程序，它从mongodb获取映射并将其显示在表中。我正在使用过滤器迭代地图。以下是代码段：

对于控制器：

app.controller('MainCtrl', function($scope) { 
  $scope.data = new Map(); 
  $scope.data.set("prop1","as"); 
  $scope.data.set("prop2","ssas"); 
});

对于过滤器：

app.filter('fromMap', function() {
  return function(input) {
   var out = {};
   input.forEach((v, k) => out[k] = v);
   return out;
 }
});

和HTML：

<body ng-controller="MainCtrl">
   <table>
    <tr ng-repeat="(key, val) in data | fromMap"><td>{{key}}</td><td>{{val}}</td></tr>
   </table>
</body>

我想要实现的是密钥和密钥。价值可编辑。我尝试为key和amp设置ng-model。值为

<td><input type="text" class="form-control" ng-model="data[key]"></td>
<td><input type="text" class="form-control" ng-model="data[val]"></td>

但这会在列中创建一个空文本框。如何在文本字段中设置值？

Answer 1

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.data = new Map();
  $scope.data.set("prop1", "as");
  $scope.data.set("prop2", "ssas");

  $scope.out = [];
  $scope.data.forEach((v, k) => $scope.out.push({
    key: k,
    value: v
  }))

  $scope.print = function() {
    var out = {};
    $scope.data.forEach((v, k) => out[k] = v);
    return out;
  }

  $scope.$watch('out', function(newVal, oldVal) {
    for (var item of newVal) {
      var oldItem = oldVal.filter(x => x.key == item.key)[0];
      if (!oldItem) {
        $scope.data.delete(oldVal[newVal.indexOf(item)].key);
        $scope.data.set(item.key, item.value);
        return;
      } else {
        if (oldItem.value != item.value) {
          $scope.data.set(item.key, item.value);
          return;
        }
      }
    }
  }, true)

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl'>
  <ul>
    <li ng-repeat='item in out'>
      <input type='text' ng-model='item.key' />
      <input type='text' ng-model='item.value' />
    </li>
  </ul>
  {{print() | json}}
</div>

在AngularJS中为表格设置ng-model

1 个答案: