将$http.get()请求中的数据绑定到ng repeat中

我正在从服务器上获取我的JSON数据，但当试图使用ng repeat指令在我的页面上列出它时，问题就来了。

这是我的HTML正文内容，其中'mydata'（JSON数组）在$http.get（）方法接收到请求的数据后立即正确显示，但ng-reeat没有列出数组元素：

<body ng-app="myapp">
  <div ng-controller="MyController" >
    Data from server: {{ mydata }}          
  </div>
  <hr>
  <ul ng-controller="MyController as controller">
    <li ng-repeat="data in controller.mydata">
      {{ data }}
    </li>
 </ul>
</body>

这是Javascript代码：

var URI = 'http://my_service_uri/';
angular.module("myapp", [])
    .controller("MyController", function($scope, $http) {
        $scope.mydata = [];
        $http.get(URI)
            .then(function(result) {
                $scope.mydata = result.data;
             });
    });

您将控制器混淆为语法并使用范围。看到我在http://plnkr.co/qpcKJZx4jovC6YdzBd6J你会看到一个例子。

主要的变化是，当使用控制器作为语法时，您需要将变量绑定到它。

app.controller('MyController', function($http) {
    var vm = this;
    vm.mydata = [];
    $http.get(URI)
        .then(function(result) {
          console.log(result);
          vm.mydata = result.data;
         });

选择一种发布视图数据的方法并坚持使用，可以是controller as，也可以是$scope。

你会注意到顶部的"来自服务器的数据"在plunker中不再工作，因为我没有更改它以使用控制器作为语法。

相关内容

最新更新

热门标签：