Question

编辑：看来我的问题比下面代码中的简单错字更复杂。我有第三方组件交互并在输入上提出更改事件，当我不希望它时，角度正在增加。问题出在那里。如果我管理它，我会尝试找一个简单的小提琴并更新问题。

我有一对输入，它们具有ng-model并共享ng-change功能。 ng-change在控制器中设置一个布尔值，该值应该通过ng-class指令更新输入上的类。然而，两个输入中的第一个似乎从来没有得到任何更新它的类。这是一个简化版本：

查看：

test/com/example/TestWizard

控制器：

<div ng-controller='TestCtrl'>
    <input type="text" ng-class="{ 'invalid': firstInvalid }" ng-model="firstValue" ng-change="doOnChange()"></input>      
    <input type="text" ng-class="{ 'invalid': secondInvalid }" ng-model="secondValue" ng-change="doOnChange()"></input>
</div>

Codepen： http://codepen.io/Samih/pen/ZGXQPJ

注意如何在任一输入中输入，第二个输入会像我期望的那样更新类，但是第一个输入永远不会得到'无效'类。

提前感谢您的帮助。

Answer 1

检查您的代码是否存在拼写错误：

这一行

 $scope.firstInValid = !$scope.firstInvalid;

应该是

 $scope.firstInvalid = !$scope.firstInvalid;

应该是$scope.firstInvalid，而不是$scope.firstInValid。

Answer 2

这似乎对我有用：刚刚编辑过＃first;无效＆＃39;。

查看：

<div ng-controller='TestCtrl'>
    <input type="text" ng-class="{ 'invalid': firstInvalid }" ng-model="firstValue" ng-change="doOnChange()"></input>      
    <input type="text" ng-class="{ 'invalid': secondInvalid }" ng-model="secondValue" ng-change="doOnChange()"></input>
</div>

控制器：

function TestCtrl($scope) {
  $scope.firstInvalid = false;
  $scope.secondInvalid = false;
  $scope.firstValue = '';
  $scope.secondValue = '';

  $scope.doOnChange = function () {
      console.log('change fired');
      $scope.firstInvalid = !$scope.firstInvalid;
      $scope.secondInvalid = !$scope.secondInvalid;
  };

};

Codepen：http://codepen.io/vikashverma/pen/BNwKmQ

触发ng-change后角度ng-class不更新

2 个答案: