1

AngularJS を使用して、中間フィールドの必要性をスキップしながら、選択オプションをリモート データ ソースにバインドしたいと考えています。これが可能かどうかはわかりません。

たとえば、私の理想的な HTML は次のようになります。

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

私のスコープの getCities への呼び出しは、州の値 (モデルの他の場所にバインドされている) を受け取り、$http.get を使用してリモート呼び出しを行い、都市のリストを取得します。

私のシナリオでは、同じコントローラーによって複数の選択が管理されるため、返されるデータの各セットを格納する場所が 1 つもなく、クエリをいつ実行するかを正確に知ることもできません。

これを行う方法についての提案を探しています。getCities から $http promise を返すことはできません。繰り返し呼び出されるからです。

4

1 に答える 1

0

上記のコメントであなたが何を求めているのかを正確に誤解しました。これは、一種の遅延バインディング アプローチで実現できます。モデルは通常どおりに表示され、 promisengOptionコールバックはコントローラーのスコープを変更する必要があります。

フィドル: 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 に答える