为什么我的ng-options不填充我的选择输入 [英] Why is my ng-options not populating my select input

问题描述

我收到了返回的JSON

I have JSON being returned that looks like this

[{"Phone_Type_Code":1,"Phone_Type_Desc":"Cell","Valid_Date":"2014-01-01T00:00:00.000Z","Expiration_Date":null},{"Phone_Type_Code":2,"Phone_Type_Desc":"Home","Valid_Date":"2014-01-01T00:00:00.000Z","Expiration_Date":null},{"Phone_Type_Code":3,"Phone_Type_Desc":"Office","Valid_Date":"2014-01-01T00:00:00.000Z","Expiration_Date":null},{"Phone_Type_Code":4,"Phone_Type_Desc":"Other","Valid_Date":"2014-01-01T00:00:00.000Z","Expiration_Date":null}]

我的控制器中有一个如下所示的作用域:

I have a scope in my controller that looks like this:

$scope.phoneTypes = function(){
        return $http.get("/api/lookup/Phone_Type").then(function(response){
            return response.data;
        });
    };

然后选择一个看起来像:

Then a select that looks like :

 <select ng-model="phoneTypes" ng-options="value.Phone_Type_Code as value.Phone_Type_Desc for (key,value) in phoneTypes">
                        <option value="">Select One</option>
                    </select>

但是当我运行它时，断点甚至没有在phoneTypes方法内部命中，并且没有填充任何东西.我在做什么错了?

But when I run it the break point does not even hit inside the phoneTypes method and nothing is populated. What am I doing wrong?

推荐答案

$ scope.phoneTypes 是一个函数，因此如果要在 ngOptions 中使用它需要在phoneTypes()

$scope.phoneTypes is a function so if you want to use it inside of the ngOptions you need to call it as such ... in phoneTypes()

尽管如此，当摘要周期检查时，您可能会遇到问题，并最终再次调用api.

However with that being said you might run into a problem when the digest cycle checks and you end up making another call to your api.

如果将其分配给作用域，则在摘要周期内不会再次调用api.

If you assign it to the scope it won't make another call to the api during the digest cycle.

$scope.phoneTypes = [];

$http.get("/api/lookup/Phone_Type").then(function(response){
            $scope.phoneTypes = response.data;
        });

使用 $ timeout()来模拟延迟的jsfiddle示例

Example on jsfiddle that uses $timeout() to simulate a delay

这篇关于为什么我的ng-options不填充我的选择输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！