Question

我正在关注来自http://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_uppercase的Angular基础教程我想将控制器中的字符串数组更改为函数的返回，以使其动态化，但不显示数据。我找到了一些类似的问题和答案，但没有答案帮助我。我知道有一些使用ng-init的tric但我无法得到它。

这是我的代码：

            <div ng-app="myApp" ng-controller="namesCtrl">

            <ul>
            <li ng-repeat="x in names ">
                {{ x }}
            </li>
            </ul>

            </div>

            <script>
            angular.module('myApp', []).controller('namesCtrl', function($scope) {
                $scope.names =  someFunction(10);
            });

            function someFunction(param) {
                var result = [];
                result.push("a");
                for(i = 1; i<= param; i++){
                ruban.push("b");
                } 
                return result;
            }
            </script>

            </body>
            </html>

感谢您的帮助。

Answer 1

ng-repeat需要唯一值。在你的情况下实现这一点的方法是这样做：

<li ng-repeat="x in names track by $index">

然后在你的func中修复这一行：

ruban.push("b");

是：

result.push("b");

将someFunction（）移动到你的控制器中，然后在调用它之前声明它。像这样：

.controller('namesCtrl', function($scope) {

  function someFunction(param) {
    var result = [];
    result.push('a');

    for (i = 1; i <= param; i++) {
      result.push('b');
    }
    return result;
  }

  $scope.names = someFunction(10);
});

Answer 2

正如我在评论中所说，尝试删除/更改＆＃34; ruban.push（）＆＃34;并确保使用＆＃34; track by＆＃34;为你的ng-repeat。

你可以试试这个：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

    <div ng-app="myApp" ng-controller="namesCtrl">

        <ul>
            <li ng-repeat="x in names track by $index">
                {{ x }}
            </li>
        </ul>
    </div>

    <script>
    angular.module('myApp', []).controller('namesCtrl', function($scope) {
        $scope.names =  someFunction(10);
    });

    function someFunction(param) {
        var result = [];
        result.push("a");
        for(i = 1; i<= param; i++){
        result.push("b");
        } 
        return result;
    }
    </script>

</body>
</html>

干杯！

ng-repeat不显示函数数据

2 个答案: