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

Question

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

cha*_*nie 10 angularjs angularjs-ng-repeat angular-http

我从服务器上获得了很好的JSON数据,但是当尝试使用ng-repeat指令在我的页面上列出它时会出现问题.

这是我的HTML正文内容,只要$ http.get()方法接收到请求的数据,'mydata'(JSON数组)就会正确显示,但ng-repeat没有列出数组元素:

<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>

Run Code Online (Sandbox Code Playgroud)

这是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;
             });
    });

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 19

您将控制器混合为语法和使用范围.在http://plnkr.co/qpcKJZx4jovC6YdzBd6J上查看我的plunker,你会看到一个例子.

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

app.controller('MyController', function($http) {
    var vm = this;
    vm.mydata = [];

    $http.get(URI)
        .then(function(result) {
          console.log(result);
          vm.mydata = result.data;
         });

Run Code Online (Sandbox Code Playgroud)

选择一种发布视图数据的方法并坚持使用它,无论是控制器还是$ scope.

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

归档时间：	11 年，10 月前
查看次数：	18992 次
最近记录：	11 年，10 月前