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;
       }
});

我得到了正确的控制台输出，但是dom不会应用更改。

修改：fiddle

Answer 1

<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>代码指定名称时，Angular会为其分配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将被分配给输入。同样，{true}时分配ng-valid-bad-password。

对于$error，表单的badPassword标记设置为true，以匹配验证。

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

Answer 2

$scope.user.newPasswordVerify!==""

没有工作。我用

替换了它

$scope.user.newPasswordVerify.charAt(0)

并且有效

angularjs将ng-show应用于input-placeholder-icon

2 个答案: