0

このフィドルを見てください。フィールドがフォーカスされると、ドロップダウン ボックスが表示されます。ドロップダウン ボックス内の要素をクリックすると、モデルの値が更新され ( categoryFilter)、モデルの状態が から に更新さng-invalidれng-validます。値を削除すると に戻りng-invalid、再度値を選択すると に戻りng-validます。言い換えれば、それは完璧に機能します。

コードに従ってこのフィドルを作成しました。私のコード（コントローラー+フォーム）はまったく同じですが、何らかの理由でアイテムを選択した後、それを消去して再度アイテムを選択すると、フィールドが残りng-invalidます. ここに移動して値を選択し、削除して再度選択すると、これを自分で確認できます。ng-invalidフォーム + コントローラーは同じですが、状態が維持されていることがわかります。問題はどこですか？

desktop.controller('StartClubModalController', function ($scope,$http,$modalInstance) {


    $scope.$watch('categoryFilter', function(value) {
        angular.element(categoryFilter).val(value);
    });

    $scope.categories = [{"Category":{"id":"6","category":"Community"}},{"Category":{"id":"4","category":"Competitions"}},{"Category":{"id":"5","category":"Crossfit"}},{"Category":{"id":"2","category":"Fitness"}},{"Category":{"id":"3","category":"Sport"}},{"Category":{"id":"1","category":"Workout"}}];

    $scope.categoryDropDownClickEvent = function(value) {                   
        $scope.categoryFilter = value;
    };

});
4

1 に答える 1

0

まず、DOM を使用してコントローラーを操作することはお勧めできません。すべての DOM 操作/更新はディレクティブに実装されます。ディレクティブは、AngularJS を使用しているときに jQuery コードを記述する必要がある唯一の場所です。

第二に、を使用する必要categoryFilterはng-modelありません$watch。

$scope.$watch('categoryFilter', function(value) {
        angular.element(categoryFilter).val(value);
    });

それを除く。（ところで、これはAngularの利点です）

変更categoryFilterがあれば、自動的に更新されます。

固定デモを見るFiddle

于 2013-10-20T10:32:20.423 に答える