Question

我在Angular 1.x中使用ng-repeat，我正在尝试创建每个迭代唯一的ID / class / ng-model。

<input type="text" id="url-placeholder" placeholder="Companion URL" class="creative-url-box" ng-model="newCreative.companionUrl">

所有这些都在ng-repeat之下，当我想要创建新对象时，它始终为我创建相同的对象。

我尝试将{{$id}}添加到ID和类，但出了点问题。那怎么能这样呢？

由于

Answer 1

当我想创建新对象时，它始终为我创建相同的对象。？

 ng-model="newCreative.companionUrl">

在每次迭代期间，您使用相同的model。这就是为什么您获得相同的值。

使用ng-repeat，它会在每次迭代中提供不同值的$index。

我们可以用它来创建新的模态实例。

<div ng-repeat="oneRec in arrRec">
<input type="text" id="url-placeholder"  ng-model="newCreative[$index].companionUrl">
</div>

现在，您有newCreative数组使用索引访问它。它将创建新对象

Answer 2

试试这个

<!DOCTYPE html>
<html>
<head>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
  <script type="text/javascript">


    angular.module("app",[])
    .controller("ctrl",function($scope){

      $scope.urlData = [{
        id:1,
        url:'google.com'
      },{
        id:2,
        url:'stackoverflow.com'
      }]



    });

  </script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div ng-repeat="data in urlData track by $index">
   {{data.id}}, 
   <input type="text" ng-model="data.url">
 </div>
</body>
</html>

Answer 3

在$index内使用ng-repeat获取动态，如下所示：

<input type="text" id="url-placeholder" placeholder="Companion URL" class="creative-url-box" ng-model="newCreative.companionUrl{{$index}}">

但是，推荐的方法是使用try来使用迭代器companionUrl的{{1}}属性，它对于每个集合项都是唯一的。

例如：

newCreative

你的<Div ng-repeat = "newCreative in newCreativeCollection track by $index"> <input type="text" id="url-placeholder" placeholder="Companion URL" class="creative-url-box" ng-model="newCreative.companionUrl"> </Div>应该是这样的：

newCreativeCollection

如何在ng-repeat中使用ng-model

3 个答案: