如果ng-if条件为真，如何设置属性

Question

如果ng-if在下面的代码data-validator=""中返回true并且data-validator-msg=""仅在条件为真时设置并且如果它返回false则如何设置属性然后两个属性都不设置但是在所有条件下如何设置属性单选按钮应该出现。

  

在当前代码中，条件正在运行，但单选按钮仅在   真实情况。

<input ng-model="user.duration" value="{{ x.title}}" type="radio" ng-if="$index==5" data-validator="required" data-validator-msg="Select one radio button">{{ x.title}}

我到底犯了什么错误？

Answer 1

我为你写了一条指令：

.directive("isValidatorDirective", function() {
  return {
    restrict: "A",
    scope: {
      applyValidator: '=',
      msg: '@',
      validator: '@'
    }
    link: function(scope, elem, attrs) {
      if (scope.applyValidator) {
        elem.attr('data-validator-msg', scope.msg); 
        elem.attr('data-validator', scope.validator);
      }
      else {
        elem.removeAttr('data-validator-msg');
        elem.removeAttr('data-validator');
      }
    }
  };
});

按如下方式使用：

<input is-validator-directive apply-validator="$index === 5" validator="required" msg="Select one radio button" ng-model="user.duration" value="{{ x.title}}" type="radio">{{x.title}}

希望它可以帮到你！

Answer 2

最简单的解决方案：

<input ng-model="user.duration" value="{{x.title}}" type="radio" ng-if="$index==5" data-validator="required" data-validator-msg="Select one radio button">{{x.title}}

<input ng-model="user.duration" value="{{x.title}}" type="radio" ng-if="$index!=5">{{x.title}}

（ ng-if 如果条件评估为false，则从DOM中删除元素）

Answer 3

您可以使用简单的条件逻辑来执行此操作：

<input
  ng-model="user.duration" 
  value="{{ x.title}}" 
  type="radio" 
  data-validator="{ ($index===5 && 'required') || '' }" 
  data-validator-msg="{ ($index===5 && 'Select one radio button') || '' }" 
>{{ x.title}}

Answer 4

问题是ng-if仅在条件为真时呈现相应的元素。您想要的是根据条件将不同的值作为属性传递。例如，您可以使用条件运算符执行此操作：

<input ng-model="user.duration"
       value="{{ x.title}}"
       type="radio"
       data-validator="{{ $index==5 ? 'required' : '' }"
       data-validator-msg="{{ $index==5 ? 'required' : 'Select one radio button' }">
  {{x.title}}
</input>