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 回答