Question

我有一个控制器从API获取一些数据：

.controller('MyDataController', ['$http', function($http) {

    pdc = this;
    pdc.projects = []

    pdc.getData = function(val) {
        return $http.get('../myUrl/'+val+"/").then(function(response){
            return response.data;
        });
    };    

}]);

我正在尝试遍历响应数据（像[{"foo":3, "bar":"hey"},{...},...,{...}]之类的对象列表），每次用户更改getData时都会调用myValue。这是代码：

<div ng-controller = "MyDataController as mdc">
    <input type="text" ng-model="myValue">
    <p ng-repeat="myData in mdc.getData(myValue)">{{myData.foo}}</p>
</div>

......但它不起作用。似乎ng-repeat存在问题，我该如何解决？

Answer 1

当然，这不是唯一的方法......但工作正常

控制器......

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

app.controller('MyDataController', ['$scope', '$http', function ($scope, $http) {

    $scope.values = [];

    $scope.$watch('myValue', function (newValue, oldValue) {
        if (newValue !== oldValue) {
             return $http.get('../myUrl/'+newValue+'/').then(function(response){
                   $scope.values = response.data;
             });
        }
    });

}]);

视图......

 <div ng-app="app">
    <div ng-controller="MyDataController">
        <input ng-model="myValue" type="text" />
        <p ng-repeat="myData in values">{{myData.foo}}</p>
    </div>
</div>

Try it in JSFiddle

Answer 2

这是正确的方法：

.controller('MyDataController', ['$http', function($http) {
    pdc = this;
    pdc.projects = [];

    pdc.getData = function(val) {
        return $http.get('../myUrl/'+val+"/").then(function(response){
            pdc.data = response.data;
        });
    };
}]);

然后按如下方式更新您的标记：

<div ng-controller="MyDataController as mdc"">
    <input type="text" ng-model="myValue" ng-change="mdc.getData(myValue)">
    <p ng-repeat="myData in mdc.data()">{{myData.foo}}</p>
</div>

为什么原始代码没有给出预期结果？

在调用getData时，您获得的是对稍后可能获得的数据的承诺。你当时没有得到数据。
返回response.data您所在的位置，但未达到您的目标，因为该成功功能与您的getData没有直接关联。
当范围发生变化时，Angular会更新您的视图。从您的请求返回数据后，没有任何迹象表明任何内容已发生变化。您应该对作用域中的某个属性进行分配以触发视图更新（还有其他方法可以实现，但我已经说过您当前需要知道的内容）。表达式"MyDataController as mdc"将您的控制器添加到范围，并且通过此添加，控制器对象中的更改将触发视图更新。

AngularJS：循环访问函数返回的对象列表

2 个答案: