Question

这是我的代码。

$scope.data=[];
$scope.data=[{"label":"name","type":"string"},{"label":"email","type":"string"}];
$scope.addFields = function (field) {
   $scope.data.push(field);
  };

这是我的HTML： -

<div ng-repeat="eachItem in data">
<input type="button" value="add" ng-click="addFields(eachItem)"/>
    <label>{{eachItem.label}}</label>
    <input type="text" ng-model="fieldValue"/>
</div>

当我点击添加按钮时，再将另一个对象推入$scope.data数组，如

 $scope.data=[{"label":"name","type":"string"},{"label":"email","type":"string"},{"label":"name","type":"string"}];

在上面我得到了一个错误

angular.min.js:102 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.3.14/ngRepeat/dupes?p0=nestedField%20in%20fie…%2C%22type%22%3A%22string%22%2C%22%24%24hashKey%22%3A%22object%3A355%22%7D
at Error (native)

添加后我有重复的对象。因为我想在angularjs.First中使用ng-repeat重复标签名称，我有这样的输出

输出： -

name   textbox
email  textbox

添加按钮后，单击输出： -

name   textbox
email  textbox
name   textbox

Answer 1

对此purpose使用track by。

<div ng-repeat="eachItem in data track by $index">
<input type="button" value="add" ng-click="addFields(eachItem)"/>
    <label>{{eachItem.label}}</label>
    <input type="text" ng-model="eachItem.value" />
</div>

您还可以将track by与自定义字段一起使用，例如id或其他

重要：最好在每个track by中使用ng-repeat，因为它会提高ng-repeat的效果（read more）。

但是，当您使用track by构建（read more）

时，请避免在ng-options和其他情况下使用select as .. for ...

JsFiddle here

Answer 2

按$ index使用track

var app = angular.module("app",[])
app.controller('ctrl',['$scope', function($scope){
       $scope.data=[];
$scope.data=[{"label":"name","type":"string"},{"label":"email","type":"string"}];
$scope.addFields = function (field) {
   $scope.data.push(field);
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="item item-checkbox">
   <div ng-repeat="eachItem in data track by $index">
<input type="button" value="add" ng-click="addFields(eachItem)"/>
    <label>{{eachItem.label}}</label>
    <input type="text" />
</div>    
</div>

Answer 3

您必须确保数组中的项具有唯一键。如果无法做到这一点，您可以在ng-repeat中使用@TargetApi(Build.VERSION_CODES.LOLLIPOP) @Override public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) { String url = request.getUrl().toString(); WebResourceResponse response = super.shouldInterceptRequest(view, request); // load native js if (url != null && url.contains(INJECTION_TOKEN/* scheme define */)) { response = new WebResourceResponse( "text/javascript", "utf-8", loadJsInputStream(url, JsCache.getJsFilePath(path) /* InputStream */)); } return response; }。

查看详细信息here

如何在AngularJs中使用ng-repeat重复重复的对象？

3 个答案: