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，限制＆＃39; A＆＃39;并根据值之间的比较设置输入的有效性。它工作正常 - 如果firstPerson.name不等于secondPerson.name，则输入边框为红色。

但是！如果范围上没有secondPerson，我不希望将属性same-as-person渲染到html。我尝试使用ng-attr但它似乎不起作用。在当前场景中，如果secondPerson不存在，则指令中secondPerson.name的值为空字符串。

请注意，如果存在secondPerson但名称为＆＃34;＆＃34;我还是想显示红色输入。除此之外，我比较了这两个人的许多属性，而不仅仅是名称，这就是为什么我想要它是指令而不是ngIf，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功能没有获得新的输入类状态。

如何在角度条件下应用属性？

1 个答案: