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

请参阅此fiddle。当该字段在焦点上时，会出现一个下拉框。当您单击下拉框内的某个元素时，该值将在模型中更新（categoryFilter），模型的状态将从ng-invalid更新为ng-valid。当您删除该值时，它会回到ng-invalid，当您再次选择一个值时，它会回到ng-valid。换句话说，它是完美的。在Angularjs的控制器中更新了表单元素后仍然无效

我根据我的代码制作了这个小提琴。尽管我的代码（控制器+表单）完全一样，但出于某种原因，我选择一个项目后，将其删除并再次选择一个项目，但该字段仍为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; 
    }; 

});

来源

2013-10-20 user2899800

首先，它不是良好的做法，用DOM操纵进入控制器。所有的DOM操作/更新工具都变成了指令。指令只是您在使用AngularJS时应该编写jQuery代码的地方。

其次，categoryFilter是ng-model，这样你就不需要使用$watch：

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

删除它。 （顺便说一下，这是Angular的优势）

任何变化categoryFilter应自动更新。

见固定演示Fiddle

来源

2013-10-20 10:32:20

谢谢，这的确是真实的，我应该把它放在一个指令。那是我之后的计划。关于删除'手表'，当我删除它会导致模型不会在第二次选择一个项目后更新。这只发生在我的应用程序，而不是小提琴，虽然代码是相同的：S。我认为这个问题与我相关。请检查[这里]（http://www.workoutcrowd.com/users/20/name+lastlkj）并选择一些内容，删除并尝试再次选择它。这让我疯狂 – user2899800

奇怪的是，唯一的一种方法是在您的网站上启动禁用导入 –

您是否尝试过最新的稳定版本1.2.0-rc.3 for Angular？ –

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

回答

相关问题