Question

请参阅此fiddle。当焦点处于焦点时，会出现一个下拉框。当您单击下拉框中的元素时，该值将在模型（categoryFilter）中更新，模型的状态将从ng-invalid更新为ng-valid。当您删除该值时，它会返回ng-invalid，当您再次选择一个值时，它会返回ng-valid。换句话说，它完美无缺。

我根据我的代码制作了这个小提琴。虽然我的代码（控制器+表单）完全相同，但在我选择一个项目之后，删除它并再次选择一个项目，该字段仍为ng-invalid。如果您go here，可以自行检查并选择一个值，然后删除并再次选择。虽然表单+控制器是相同的，但您会看到状态仍为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;
    };

});

Answer 1

首先，用DOM操纵控制器是不好的做法。所有DOM操作/更新都实现为指令。指令只是在使用AngularJS时应该编写jQuery代码的地方。

其次，categoryFilter为ng-model，因此您无需使用$watch：

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

删除它。 （BTW，这是Angular的优势）

任何更改categoryFilter都应自动更新。

参见固定演示 Fiddle

在Angularjs中的控制器中更新后，表单元素仍然无效

1 个答案: