Question

这是index.html：

<!DOCTYPE html>
<html ng-app="helloall">

  <head>
    <meta charset="utf-8" />
    <title>Hello All</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <item data="name" ng-repeat="name in names"></item>
  </body>

</html>

这是app.js文件：

var app = angular.module('helloall', []);
function componentCtrl(){
  var ctrl = this;
  ctrl.otherNames  = [{last: "John", first: "Doe"}, {last: "Mary", first: "Jane"}];
}

app.controller('MainCtrl', function($scope) {
  $scope.names = [{family: "asdf", first: "test"}, {family: "qwerty", first: "test2"}]
});

angular.module('helloall').component('item', {
   controller: componentCtrl,
   templateUrl: 'item.html',
   bindings: {
     data: '='
   }
});

这是item.html：

<tr ng-repeat="name in $ctrl.otherNames">
  Name: {{name.last}}
</tr>
<br>
{{$ctrl.data.first}}
{{$ctrl.data.family}}
<br>

这是输出：

其他姓氏：
测试asdf

其他姓氏：

test2 qwerty

我想知道为什么以下部分中的ng-repeat不起作用。：

<tr ng-repeat="name in $ctrl.otherNames">
      Name: {{name.last}}
</tr>

{{name}}或{{name.last}}不输出任何内容。

当我执行{{$ ctrl.otherNames}}时，输出会显示＆＃34; otherNames＆＃34;

的内容

为什么？

在Plunkr中查看问题：https://plnkr.co/edit/X3gKdZUJIVbNcBlgYfkW?p=preview

Answer 1

将tr中的item.html代码更改为div会使其有效。

此外，您只需在table和tr附近添加td标记即可。

https://plnkr.co/edit/U0XjMUkixs9s1RsswWVK

为什么ng-repeat在这个AngularJs 1.5.x组件中不起作用

1 个答案: