2017-04-04 106 views
1

兩個ng-repeat都不起作用。但只是顯示{{rows}}確實有效。所以模板和控制器之間的通訊正在進行。ng-repeat不起作用AngularJS

我的ng-repeat有什麼問題?

我已經搜索了關於這個主題的其他文章,但是在他們所有的錯誤都在控制器中。但即使在HTML模板中定義的數組中重複I也不起作用。當不循環時,行顯示出來。

<div ng-controller="OrderNewCtrl"> 

    <h1> {{ rows }}</h1> 
    <div ng-repeat="i in [42, 42, 43, 43]"> 
    {{ i }} 
    <p>test</p> 
    </div> 

    <div class="form"> 
    <form> 
     <table> 
     <tbody> 
      <tr ng-repeat="rowContent in rows"> 
      {{rowContent}} 
      </tr> 
     </tbody> 
     </table> 
     <button class="btn btn-primary btn-functionality btn-success btn-add" ng-click="addRow">+</button> 
    </form> 
    </div> 
</div> 

'use strict'; 

angular.module('myApp.orderNew', ['ngRoute']) 

.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/order/new', { 
    templateUrl: 'order-new/order-new.template.html', 
    controller: 'OrderNewCtrl' 
    }); 
}]) 

.controller('OrderNewCtrl', function($scope) { 
    $scope.rows = ['Row 1', 'Row 2', 'Row 3', 'Row 4']; 
    $scope.counter = 4; 
    $scope.test = "hi"; 

    $scope.addRow = function() { 
    $scope.rows.push('Row ' + $scope.counter); 
    $scope.counter++; 
    } 
}); 

回答

1

兩者都做工精細,只是用(key, value)分離器上的基於索引的數組。

<div ng-controller="OrderNewCtrl"> 
    <h1> {{ rows }}</h1> 
    <div ng-repeat="(key, value) in [42, 42, 43, 43]"> 
    {{ key }} 
    <p>test</p> 
    </div> 
    <div class="form"> 
    <form> 
     <table> 
     <tbody> 
      <tr ng-repeat="(rowContent, value) in rows"> 
      {{rowContent}} 
      </tr> 
     </tbody> 
     </table> 
     <button class="btn btn-primary btn-functionality btn-success btn-add" ng-click="addRow">+</button> 
    </form> 
    </div> 
</div> 
1

嘗試使用按部就班地進行,例如:

<div ng-repeat="n in ['Row 1', 'Row 2', 'Row 3', 'Row 4'] track by $index"> 
    {{n}} 
</div> 

Working Demo

1
  1. 問題與您的HTML - 您沒有使用tdtr

    <tr ng-repeat="rowContent in rows track by $index"> <td>{{rowContent}}</td> </tr>

  2. 你必須在列表中重複的值 - 在ng-repeat

    ng-repeat="i in [42, 42, 43, 43] track by $index"

    ng-repeat="rowContent in rows track by $index"

使用 track by $index