Question

我返回的JSON看起来像这样

[{"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}]

我的控制器中有一个范围如下：

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

然后选择看起来像：

 <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方法，并且没有填充任何内容。我做错了什么？

Answer 1

$scope.phoneTypes是一个函数，因此如果您想在ngOptions内使用它，则需要将其称为... in phoneTypes()

然而，有人说，当摘要周期检查并且你最终再次打电话给api时，你可能会遇到问题。

如果将其分配给范围，则在摘要周期内不会再次调用api。

$scope.phoneTypes = [];

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

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

Answer 2

将您的ng-model命名为＆＃34; selectedPhoneType＆＃34;。
您的数据是一个数组，而不是一个对象，因此，使用＆＃34; x.Code作为x.Desc for phone in PhoneTypes＆＃34;语法。
使用＆＃34;跟踪＆＃34;如果需要填充值，请参阅https://stackoverflow.com/a/22997081/4022015。但请注意，在控制器中，即使没有＆＃34;跟踪＆＃34;声明，$ scope.selectedPhoneType仍然应包含正确的＆＃34; Code＆＃34;值。不要担心生成的HTML。

为什么我的ng-options没有填充我的选择输入

2 个答案: