3

Angular データ バインディングを使用して、ユーザーがメニューで選択した項目を変更したときに JavaScript プロパティを強制的に変更するのは簡単です。ただし、メニューの生成に使用されるモデルが変更されたときに、データ バインドされたプロパティを強制的に変更する方法がわかりません。

このフィドルは動作を示しています: http://jsfiddle.net/2pHGX/。changeOptions をクリックしてモデルを変更すると、選択オプションが正しく変更されます。ただし、データ バインドされたプロパティはすぐには変更されず、ユーザーが別のメニュー オプションを選択したときにのみ変更されます。 

<body ng-app ng-controller="bodyCtrl">
    <select ng-model="selection" ng-options="option for option in options">
    </select>
    <button ng-click="changeOptions()">changeOptions</button>
    <br>
    selection: {{selection}}
</body>

function bodyCtrl($scope) {
    $scope.options = [10, 20, 30];
    $scope.changeOptions = function() {
        $scope.options = [11, 22, 33];
    };
}

ユーザーが別のオプションを選択したか、モデル、つまりオプションが変更されたため、選択したオプションが何らかの理由で変更されたときに、データ バインドされたプロパティを更新する必要があります。でこれを機能させることはできますが$watch、データ バインディングだけでは不十分な理由がわかりません。Angular でこれを達成する最善の方法は何ですか? データバインディングに関する基本的なことを誤解していますか?

4

2 に答える 2

5

以下のように ng-model をスコープ変数に直接バインドすると、何らかの理由でスコープ変数が更新されません。

<select ng-model="selection" ng-options="option for option in options">

代わりに、スコープでビュー モデルを定義し、ng-model をビュー モデル フィールドにバインドして、ビュー モデル フィールドを更新します。

<select ng-model="viewmodel.selection" ng-options="option for option in options">

コントローラーで、これを行う必要があります。

app.controller('SomeCtrl', ['$scope'
    function($scope)
    {
        $scope.viewmodel = {};
    });
于 2015-05-02T11:52:36.750 に答える
2

あなたが望む正確な動作はわかりませんが、いつでもオプションを監視できるため、変更時にアクションを実行できます（JSFiddle）：

function bodyCtrl($scope) {
    $scope.selection = 0;
    $scope.options = [ 10, 20, 30];
    $scope.changeOptions = function() {
        $scope.options = [11, 22, 33];
    };

    $scope.$watch('options', function() {
        $scope.selection = 0;
    });
}

お役に立てれば。

于 2013-07-08T22:36:39.763 に答える