각도로 속성을 조건부로 적용하는 방법은 무엇입니까?

Question

이 문제가 있습니다 : 변수를 ngModel 입력과 비교하고 싶습니다.

HTML : :

<input type='text' ng-model='firstPerson.name' same-as-person='secondPerson.name'> 

JS :

app.directive('sameAsPerson'), function() { 
return { 
require: 'ngModel', 
restrict: 'A', 
link: function ($scope, $element, $attrs, ctrl) { 
var validate = function (firstValue) { 
var secondValue = $attrs.sameAsPerson; 
ctrl.$setValidity('sameAsPerson', firstValue == secondValue); 
return firstValue ;} ; 
ctrl.$parsers.unshift(validate); 
ctrl.$formatters.unshift(validate); 

$attrs.$observe('sameAsPerson', function(secondValue) { 
return validate (ctrl.$viewValue);})}} ;}) ; 

SameAsPerson이 ngModel을 필요로하는 의상 지시자이다, 'A'를 제한하고 입력에 유효 기간을 설정 나는 지시어 것을하고 있어요 값 사이의 비교를 기반으로합니다. 잘 작동합니다 - firstPerson.name이 secondPerson.name과 같지 않으면 입력 테두리가 빨간색입니다.

하지만! 범위에 secondPerson이없는 경우 html에 동일한 사람과 동일한 속성을 표시하고 싶지 않습니다. ng-attr을 사용하려고했지만 작동하지 않는 것 같습니다. 현재 시나리오에서 secondPerson이 존재하지 않으면 지시문의 secondPerson.name 값이 빈 문자열입니다.

secondPerson이 있지만 이름이 ""인 경우에도 여전히 빨간 입력을 표시하려고합니다. 그 외에도 이름뿐 아니라 그 두 사람의 많은 특성을 비교합니다. 따라서 지시문이 아닌 ng가 아닌 ngStyle도 솔루션입니다. 그 이상의 변화가 있기 때문에 ngStyle도 해결책이 아닙니다. 입력 자체.

도움 주셔서 감사합니다.

Answer 1

스타일의 경우에만 ng-class 지시문을 사용할 수 있습니다.

<input ng-model="'firstPerson.name" ng-class="{ 'error':'secondPerson.name!='firstPerson.name' && secondPersonNameExist()"></input> 

$scope.secondPersonNameExist = function() { 
    return angular.isDefined($scope.secondPerson.name); 
} 

확인 검증이 깨끗한 당신이 오류를보고 다음 변화에 오류없는 볼 그래서 때 표시되는 클래스는 이전 것을이 fiddle 참고. 이것은 ng-change 함수가 새로운 클래스의 입력 상태를 선택하지 않기 때문입니다.