如何有条件地应用角度属性？答案

【问题标题】：How to conditonally apply attribute in angular?如何有条件地应用角度属性？
【发布时间】：2016-07-10 16:20:49
【问题描述】：

我有这个问题：我想将变量与 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，我不希望将属性 same-as-person 呈现给 html。我尝试使用 ng-attr 但它似乎不起作用。在当前场景中，如果 secondPerson 不存在，则指令中 secondPerson.name 的值为空字符串。

请注意，如果 secondPerson 存在但名称是“”，我仍然想显示红色输入。除此之外，我比较了这两个人的许多属性，而不仅仅是名字，这就是为什么我希望它带有指令而不是 ngIf，ngStyle 也不是我的解决方案，因为有更多的变化不仅仅是在输入自己。

非常感谢您的帮助！

【问题讨论】：

标签： html angularjs

【解决方案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 函数没有获取输入的新类状态。

【讨论】：