Question

我在angularjs应用程序中有以下代码，为什么这个简单的ng-repeat不起作用？

var app = angular.module('anApp', []);
app.controller('aCtrl', function($scope) {
  $scope.data = ["", "File", "", "Edit", "", "Format", ""];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="anApp" ng-controller="aCtrl">
  {{data}}
  <ol>
    <li ng-repet="j in data">{{j}}</li>
  </ol>
</div>

Answer 1

AngularJS中不允许使用重复键，而且拼写错误ng-repeat

<强> Docs

＆＃13;

var app = angular.module('anApp', []);
app.controller('aCtrl', function($scope) {
  $scope.data = ["", "File", "", "Edit", "", "Format", ""];
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="anApp" ng-controller="aCtrl">
  {{data}}
  <ol>
    <li ng-repeat="j in data track by $index">{{j}}</li>
  </ol>
</div>

＆＃13;

Answer 2

试试这个。 data数组有重复项，然后使用track by $index

<ol>
  <li ng-repeat="j in data track by $index">{{j}}</li>
</ol>

Answer 3

Angular Doc.转发器中的重复键

var app = angular.module('anApp', []);
app.controller('aCtrl', function($scope) {
  $scope.data = ["", "File", "", "Edit", "", "Format", ""];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="anApp" ng-controller="aCtrl">
  {{data}}
  <ol>
<li ng-repeat="j in data track by $index">{{j}}</li>
  </ol>
</div>

Answer 4

You can use this code it is working
In view
    {{data}}
      <ol>
      <li ng-repeat="j in data track by $index">{{j}}</li>
      </ol>

and in Javascript

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
        $scope.data = ["", "File", "", "Edit", "", "Format", ""];
});

并且对我来说，我正在用plunker写作，请更正ng-repeat的拼写

https://plnkr.co/edit/Q1OeiIzGBgpppluvtOT1?p=preview

简单的ng-repeat不起作用

4 个答案: