Question

这已被问过几次，但它似乎仍然不起作用。我有一个非常基本的例子。我没有在浏览器中运行index.html文件时出错，我在服务器上运行它。

的index.html

<div ng-view> </div>


  <div ng-controller="Controller">
      <my-names listcustomers='customer'></my-names>
  </div>

模板：

 <div ng-repeat="listcustomers">

        <table class="box-table" width="100%">

            <thead>
             <tr>
               <th>Name: {{listcustomers.name}}</th>
               <th>Age: {{listcustomers.age}}</th>
             </tr>
            </thead>
        </table>

    </div>

控制器

angular.module('myApp').
controller("Controller",["$scope", function($scope){

    $scope.customer = [

         {
            name: 'Drew',
            age: 30
         },

         {
            name: 'Meike',
            age: 54
         },

        {
            name: 'Peter',
            age: 25
        }
    ];

}])
    .directive("myNames",function($scope){
        return{
            restrict : 'E',
            transclude : false,
            templateUrl: 'pages/myNames.html',
            scope: {
                listcustomers: "="
            }
        };
    });

Answer 1

您需要定义将在ng-repeat体中使用的变量。所以listcustomers是一个对象数组，你需要迭代数组中的每个元素。在模板中尝试以下操作：

<div ng-repeat="customer in listcustomers">
    <table class="box-table" width="100%">
        <thead>
         <tr>
           <th>Name: {{customer.name}}</th>
           <th>Age: {{customer.age}}</th>
         </tr>
        </thead>
    </table>
</div>

Answer 2

使用关键字使用ng-repeat进行迭代：

<div ng-repeat="customer in listcustomers">
  <table class="box-table" width="100%">
    <thead>
     <tr>
       <th>Name: {{customer.name}}</th>
       <th>Age: {{customer.age}}</th>
     </tr>
    </thead>
  </table>
</div>

在模板中使用ng-repeat的Angular指令不起作用

2 个答案: