Question

有没有办法在创建元素时避免ID，即使用ng-model更容易验证表单字段和其他内容？

<div ng-repeat="x in TestData">
   <input type="text" id="nameField-{{$index}}"/>
</div>

上面的代码将显示输入框的数量等于TestData数组的长度，其中每个文本框将具有唯一的ID "nameField-0", "nameField-1"，依此类推，使用这些ID，我们可以获取文本框值，验证等等。

<div ng-repeat="x in TestData">
   <input type="text" ng-model=""/> <!-- what shall be done here to have unique IDs -->
</div>

尽管使用ID对我来说工作正常，但据我所知，如果我使用ID那么这将不是纯粹的角度方式（或者不能用mg模型代替ID），纠正我如果我错了

Answer 1

您不需要使用id / name / etc来获取元素。您可以使用ng-model绑定您的值，ng-pattern来验证它们。

<div ng-repeat="x in testData">
  <ng-form name="tForm">
    <input type="text" name="tInput" ng-model="x.name" ng-pattern="/^[A-Z]*$/" />
    <span ng-if="tForm.tInput.$error.pattern" style="color:red">Invalid!</span>
  </ng-form>
</div>

请参阅此jsbin。

Answer 2

在您的控制器中添加此内容，

$scope.nameField = [];

在ng-reapeat中添加此内容，

<div ng-repeat="x in TestData">
   <input type="text" ng-model="nameField[$index]"/>
</div>

nameField将是一个包含所有值的数组。

Answer 3

<div ng-repeat="x in TestData" ng-init='this["nameField-"+x]'>
    <input ng-model='this["nameField-"+x]'/>
</div>

使用ng-init将新变量添加到控制器，＆＃34;这个＆＃34;请参考你的范围，因为范围是一个对象，因为[bla] == this.bla tou实际上是在说，在我的范围内添加一个变量名＆＃34; nameField =＆＃34;然后添加x值。在创建变量之后，只需在ng-model中以相同的方式使用它。

如果您想在任何div / span中显示变量的值，只需通过ng-bind使用它：

<div ng-bind='this["nameField-"+x]'></div>

ng-model可以替换ID吗？

3 个答案: