angularjs применить ng-show к входам-placehoder-icon

Question

Я хотел бы изменить значок-заполнитель элемента с ионным вводом. Для этого я использую ng-show в двух разных значках. В контроллере я сравниваю два поля пароля равенства. Если они равны, отображается галочка, если не отображается значок снижения.

HTML:

<label class="item item-input"> 
    <input type="password" name="newPasswordVerify" placeholder="retype new password" ng-model="user.newPasswordVerify"/> 
    <i ng-show="passCorrect" class="icon ion-ios7-close-empty placeholder-icon"></i> 
    <i ng-show="!passCorrect" class="icon ion-ios7-checkmark-empty placeholder-icon" ></i> 
</label> 

контроллер:

$scope.$watch('user.newPasswordVerify', function() { 

     if($scope.user.newPasswordVerify!=="") 
     { 
      if($scope.user.newPasswordVerify.equals($scope.user.newPassword)) 
        $scope.passCorrect = true; 
      else 
        $scope.passCorrect = false; 
     } 
}); 

я получаю правильный консольный вывод, но дом не применяет изменения.

Edit: fiddle

Answer 1

$scope.user.newPasswordVerify!=="" 

не работает. Я заменил его

$scope.user.newPasswordVerify.charAt(0) 

и работает

Answer 2

<form name="frm"> 
    <label class="item item-input"> 
     <input type="password" name="newPasswordVerify" placeholder="retype new password" ng-model="user.newPasswordVerify"/> 
     <i ng-show="passCorrect" class="icon ion-ios7-close-empty placeholder-icon"></i> 
     <i ng-show="!passCorrect" class="icon ion-ios7-checkmark-empty placeholder-icon" ></i> 
    </label> 
</form> 

Когда вы даете <form> тег имя Угловое присвоит его FormController управлять проверки ввода. Рекомендуется использовать это для проверки, поскольку жизненный цикл данных модели может изменяться в зависимости от того, как вы настроили форму. То, что отображается на странице, не всегда соответствует данным модели.

Каждая директива ngModel создаст ngModelController для этой директивы, которая позволит вам добавить правила $validator.

$scope.frm.newPasswordVerify.$validator.badPassword = function(modelValue,viewValue){ 
     var value = modelValue || viewValue; 
     return $scope.user.newPassword == value; 
}; 

Приведенное выше будет проходить проверку (true), если оба пароля совпадают, в противном случае он потерпит неудачу. Когда это не удается, на вход будет назначен класс CSS ng-invalid-bad-password. Аналогично ng-valid-bad-password, когда присваивается значение true.

У этой формы будет установлен флаг $error, соответствующий true для badPassword, чтобы подтвердить соответствие.

<i ng-show="!frm.$error.badPassword" class="icon ion-ios7-close-empty placeholder-icon"></i> 
<i ng-show="frm.$error.badPassword" class="icon ion-ios7-checkmark-empty placeholder-icon" ></i>