Question

我尝试过，尝试过并尝试过。我无法做到这一点。我参加了一门非常基础的CodeSchool课程，因为我对Angular非常感兴趣。虽然我不能让这个dng ng-repeat工作。 - 非常感谢您的帮助！

    'use strict';
var myApp = angular.module('myApp', [])

    .controller('MatchListCtrl', ['$scope', '$http', function ($scope, $http) {
        console.log('Attempting API Call');

        $scope.matches = [];

        $http.get("matches.json")
            .success(function (response) {
                console.log('Grabbed matches.json successfully!');
                //Loop through each item and put it onto the matches var
                angular.forEach(response, function (item) {
                    $scope.matches.push(item);
                });

                console.log('Total of ' + $scope.matches.length + ' matches in the array.');
            })

        $scope.theMatches = function ($scope) {
            return $scope.matches;
        }

    }]
);

这是我的HTML：

<div ng-controller="MatchListCtrl as matchCtrl">
<p style="font-weight:bold;">{{matchCtrl.getMatches().length}} - Items in the array.</p>
<ul>
    <li ng-repeat="x in matchCtrl.theMatches">{{x.when}}</li>
</ul>

Answer 1

我已将您的代码片段修改过来，将其完全更改为ControllerAs语法。您的初始代码是混合样式，并且有一些可以删除的冗余。

使用ControllerAs语法时，常见的模式是首先创建一个变量来对控制器进行别名，以便能够从内部回调函数进行访问。为了清楚地说明这里发生了什么，我将此变量命名为与HTML中的别名相同。

另请注意，此处完全删除了对$scope的引用，冗余函数theMatches也是如此。

＆＃13;

var myApp = angular.module('myApp', [])

.controller('MatchListCtrl', ['$http',
  function($http) {

    var matchCtrl = this; //consistent reference to controller object

    console.log('Attempting API Call');

    matchCtrl.matches = [];

    $http.get("matches.json")
      .success(function(response) {
        console.log('Grabbed matches.json successfully!');
        angular.forEach(response, function(item) {
          matchCtrl.matches.push(item);
        });

        console.log('Total of ' + matchCtrl.matches.length + ' matches in the array.');
      })
  }
]);

＆＃13;

<div ng-controller="MatchListCtrl as matchCtrl">
  <p style="font-weight:bold;">{{matchCtrl.matches.length}} - Items in the array.</p>
  <ul>
    <li ng-repeat="x in matchCtrl.matches">{{x.when}}</li>
  </ul>
</div>

＆＃13;

Answer 2

你几乎就在那里。你只需稍微调整它。由于theMatches已被声明为函数，因此需要将其作为一个函数调用;

<li ng-repeat="x in matchCtrl.theMatches()"> {{ x.when }} </li>

我把以下的plunkr放在一起，这是类似运行plnkr.co/edit/zF8...的小例子。

app.controller('MainCtrl', function($scope) {
  var self = this;
  self.matches = function () {
    return [
      {
        name: 'Bob'
      },
      {
        name: 'Ted'
      }
    ];
  }
});

<body ng-controller="MainCtrl as main">
  <ul>
    <li ng-repeat="x in main.matches()"> {{ x.name }} </li>
  </ul>
</body>

请注意，虽然已在范围中声明了matches，但您可以将ng-repeat绑定到该$http而不是将该功能留空。

理想情况下，任何resolve个请求都应该重构为可以在控制器实例中调用的服务。由于在实例化控制器时发出请求，因此可能值得考虑使用路由器saveInBackground()选项来解析数据并将承诺逻辑从控制器中取出。

希望能帮到你！

Answer 3

您不需要使用单独的功能来访问$scope.matches。 angularjs会自动检测$scope属性的变化。

并且您需要将控件功能分配给控制器，以便将其称为控制器的属性，而不是范围。

this.theMatches = function ($scope) {
    return $scope.matches;
}

然后你需要调用函数

ng-repeat="x in matchCtrl.theMatches()"

但正如我所说，你可以输入;

ng-repeat="x in matches"

因为angularjs在$scope上自动具有双向数据绑定。

或者如果您仍想访问控制器的属性

您只需将$scope.matches = [];替换为this.matches = [];

即可

并输入ng-repeat="x in matchCtrl.matches"

在迭代JSON时NG重复不起作用

3 个答案: