angularjs - 如何在 AngularJS 中使用乘法 ng-models

Question

我有带有 ng-model 'wordset' 和 ng-change="onChange()"的 textarea

<div>
    <textarea ng-model="wordset" ng-change="onChange()"
              class="form-control app-word-set"
              placeholder="Enter Word Set" rows="4">
    </textarea>
</div>

我有按钮在这个 div 中添加了新的 textarea。我需要已经添加的 textarea 包含与我的第一个 textarea 相同的更改方法。但它应该使用 ng-model ...
我想在我的 angularJS Controller 中使用 on 方法，通过 foreach 从每个 textarea 获取值，如下所示:

$scope.wordSetTextarea = angular.element(document.getElementsByClassName('app-word-set'));

$scope.onChange = function() {
angular.forEach($scope.wordSetTextarea, function(value, key) {
      console.log(value);
   });
}

这可能吗？

Answer 1

使用 AngularJS 框架，添加多个元素 ng-repeat指示:

<div ng-repeat="item in itemArr">
    <textarea ng-model="item.wordset"
              ng-change="onChange(item,$index)"
              name="'item' + $index"
              class="form-control app-word-set"
              placeholder="Enter Word Set" rows="4">
    </textarea>
</div>

<button ng-click="addNewTextarea()">Add input</button>

$scope.itemArr = [{}];

$scope.addNewTextarea = function() {
    $scope.itemArr.push({});
};

新的 AngularJS 开发人员通常没有意识到 ng-repeat , ng-switch , ng-view , ng-include和 ng-if所有这些都会创建新的子作用域，因此当涉及这些指令时，[数据隐藏问题] 经常会出现……[它们] 可以通过遵循 always have a '.' in your ng-models 的“最佳实践”轻松避免。 .

有关更多信息，请参阅

AngularJS ng-repeat Directive API Reference -

What are the nuances of scope prototypal / prototypical inheritance in AngularJS?