angularjs 입력 - 자리 표시 자 아이콘에 ng-show를 적용하십시오.

이온 입력 요소의 자리 표시 자 아이콘을 변경하고 싶습니다. 저는 두 개의 다른 아이콘으로 TV 쇼를 사용합니다. 컨트롤러에서 두 개의 암호 필드를 비교합니다. 두 아이콘이 동일하면 쇠퇴 아이콘이 표시되지 않는 경우 체크 표시가 나타납니다.angularjs 입력 - 자리 표시 자 아이콘에 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

출처

2014-11-11 marcel

회원님이 요청 문제 작동하지만, 당신이 입력 태그의'=''사이 name'와'newPasswordVerify'을 놓치고있어. – dckuehn

'$ scope. $ apply();'를 시도 했습니까? –

예, $ scope. $ apply와 $ timout (fn() {$ scope.passCorrect = true/false}, 0)을 시도했습니다. – marcel

$scope.user.newPasswordVerify!==""

작동하지 않았다. 나는

$scope.user.newPasswordVerify.charAt(0)

로 대체하며

출처

2014-11-15 19:27:40 marcel

<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을 만듭니다.

$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을 지정할 수 있습니다.

유효성 검사와 일치하도록 badPassword의 양식의 경우 $error 플래그가 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>

출처

2014-11-11 15:12:27 cgTag

이것은 컴파일 된 것입니다. 저는 이것을 확인해야합니다. – marcel

angularjs 입력 - 자리 표시 자 아이콘에 ng-show를 적용하십시오.

답변

관련 문제