如何在 AngularJS 中使用 multiply ng-models

Question

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

的文本区域

<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 相同的更改方法。但它应该使用 ng-model ... 我想在我的 angularJS 控制器中使用 on 方法，它通过 foreach 从每个文本区域获取值，如下所示：

$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.

的 "best practice" 轻松避免

有关详细信息，请参阅

AngularJS ng-repeat Directive API Reference -
What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

如何在 AngularJS 中使用 multiply ng-models

How use multiply ng-models in AngularJS

angularjs

angularjs-ng-model