Question

使用AngularJS，我想将选择选项绑定到远程数据源，同时跳过对中间字段的需求。我不确定这是可能的。

例如，我理想的HTML将是：

<select ng-model="city" ng-options="obj for obj in getCities(state).data"></select>

对我的示波器的getCities的调用采用状态值（绑定在模型的其他位置）并使用$ http.get进行远程调用以获取城市列表。

在我的场景中，会有多个选择由同一个控制器管理，因此没有一个地方存储返回的每组数据，也不知道何时执行查询。

我正在寻找有关如何执行此操作的建议。我不能只从getCities返回$ http承诺，因为它会被重复调用。

Answer 1

我在上面的评论中误解了你究竟在问什么。你可以采用一种后期绑定方法来解决这个问题。您的ngOption应该正常查看您的模型，您的承诺回调应该修改您的控制器的范围。

小提琴：http://jsfiddle.net/XaC8e/1/

HTML

<div ng-app="test" ng-controller="test">
    <select ng-model="state1" ng-options="s for s in states" ng-change="loadNewCities(state1);">
    </select>
    <br/>
    <select ng-model="city1" ng-options="c for c in cities[state1]">
    </select>
    <br/>
    <br/>
    <select ng-model="state2" ng-options="s for s in states" ng-change="loadNewCities(state2);">
    </select>
    <br/>
    <select ng-model="city2" ng-options="c for c in cities[state2]">
    </select>
    <br/>
    <br/>
    <select ng-model="state3" ng-options="s for s in states" ng-change="loadNewCities(state3);">
    </select>
    <br/>
    <select ng-model="city3" ng-options="c for c in cities[state3]">
    </select>
    <br/>
    <br/>


    1: {{city1}}, {{state1}}
    <br/>
    2: {{city2}}, {{state2}}
    <br/>
    3: {{city3}}, {{state3}}
</div>

JavaScript的：

angular.module('test', [])
.controller('test', function ($scope) {
    $scope.states = ['ca', 'ny', 'va'];
    $scope.cities = {
        'ca': ['san diego', 'san francisco']
    };

    $scope.loadNewCities = function (s) {
        if (typeof $scope.cities[s] !== 'undefined') {
            // don't load if we already have cities
            return;
        }
        // TODO call a service here, run the $scope.$apply in the callback
        if (s == 'ny') {
            setTimeout(function () {
                // faking a callback
                $scope.$apply(function () {
                    $scope.cities[s] = ['nyc', 'buffalo'];
                });
            }, 200);
        }
        if (s == 'va') {
            setTimeout(function () {
                // faking a callback
                $scope.$apply(function () {
                    $scope.cities[s] = ['richmond', 'chesapeake'];
                });
            }, 200);
        }
    };    
});

将ng-options绑定到远程JSON数据？

1 个答案: