Question

最近我看到了下面的ng-repeat示例代码。它看起来比官方的angularjs网站简单得多。但是它在我的本地环境中不起作用。控制台中没有错误消息。重复不会显示任何内容。我完全糊涂了。下面的ng-repeat有什么问题？

<div ng-app>
  <ul class="example-animate-container">
    <li ng-controller="orderprovider" class="animate-repeat" ng-repeat="i in items">
        {{i.id}} , {{i.total}}
    </li>
  </ul>
</div>

Answer 1

将控制器从ng-repeat中取出：

<div ng-app>
  <ul class="example-animate-container" ng-controller="orderprovider">
    <li class="animate-repeat" ng-repeat="i in items">
        {{i.id}} , {{i.total}}
    </li>
  </ul>
</div>

ng-repeat创建DOM元素的副本，并在上面的代码中创建orderprovider控制器的多个实例。这是一个有效的plunker。

Answer 2

更新了你的小提琴。

http://jsfiddle.net/331kfnk5/4/

<强> HTML

<body ng-app="app">        
    <div ng-controller="mainController">
        <ul class="example-animate-container">
            <li class="animate-repeat" ng-repeat="i in items">
                {{ i.id }} , {{ i.total }}
            </li>
        </ul>
    </div>
</body>

<强> JS

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

app.controller('mainController', function($scope) {
    $scope.items = [
        { id: 'x10242458', total: 100, actual: 80 },
        { id: 'x10242408', total: 10, actual: 8 },
        { id: 'x10242308', total: 101, actual: 81 }
    ];
});

你错过了一些关键的东西，比如加载Angular应用程序，你还把控制器包含在一个可重复的元素上，这是我以前从未尝试过的，但我猜测会导致糟糕的事情发生。

从那里只是添加一个合适的Controller闭包并在正确的时间加载Angular框架的情况。

AngularJS重复样本不起作用

2 个答案: