1

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

例如，我理想的 HTML 是：

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

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

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

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

4

1 回答 1

0

我误解了您在我上面的评论中到底在问什么。您可以使用一种后期绑定方法来解决这个问题。您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);
        }
    };    
});
于 2013-04-23T20:26:38.943 回答