AngularJS에서 속성을 조건부로 적용하는 가장 좋은 방법은 무엇입니까?

범위의 부울 변수를 기반으로 요소에 예를 들어 "contenteditable"을 추가 할 수 있어야합니다.

사용 예 :

<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>

$scope.editMode로 설정된 경우 contenteditable = true가 요소에 추가 됩니다 true. 이 ng-class와 같은 속성 동작을 구현하는 쉬운 방법이 있습니까? 지침을 작성하고 공유하지 않을 경우 공유하는 것을 고려하고 있습니다.

편집 : 제안 된 attrs 지시문과 ng-bind-attrs 사이에 약간의 유사성이있는 것으로 보이지만 1.0.0.rc3 에서 제거 된 이유는 무엇입니까?

ng-class를 사용할 수없는 경우 (예 : SVG 스타일링) 클래스 attr을 조건부로 설정하려면 다음을 사용하고 있습니다.

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

다른 속성 유형에도 동일한 접근 방식이 적용됩니다.

(ng-attr-를 사용하려면 최신 불안정한 각도에 있어야한다고 생각합니다. 현재 1.1.4입니다.)

ng-attrAngular 표현식을 평가하기 위해 속성을 접두어로 사용할 수 있습니다 . 표현식의 결과가 정의되지 않으면 속성에서 값이 제거됩니다.

<a ng-attr-href="{{value || undefined}}">Hello World</a>

생산할 것 (가치가 거짓 인 경우)

<a ng-attr-href="{{value || undefined}}" href>Hello World</a>

따라서 false"false"라는 단어가 값으로 생성되므로 사용하지 마십시오 .

<a ng-attr-href="{{value || false}}" href="false">Hello World</a>

지시문에서이 트릭을 사용할 때. 지시문의 속성에 값이 없으면 false입니다.

예를 들어 위의 내용은 거짓입니다.

function post($scope, $el, $attr) {
      var url = $attr['href'] || false;
      alert(url === false);
}

속성을 열심히 설정 하여이 작업을 수행했습니다. 속성의 부울 값을 사용하여 속성 적용 가능성을 제어합니다.

다음은 코드 스 니펫입니다.

<div contenteditable="{{ condition ? 'true' : 'false'}}"></div>

이게 도움이 되길 바란다.

최신 버전의 Angular (1.1.5)에는이라는 조건부 지시문이 포함되어 있습니다 ngIf. 요소가 숨겨져 있지 않지만 DOM에 전혀 포함되지 않는다는 점 ngShow과 다릅니다 ngHide. 비용이 많이 들지만 사용되지 않는 구성 요소에 매우 유용합니다.

<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>

부울 검사를 기반으로 특정 값을 표시하도록 속성을 가져 오거나 부울 검사가 실패한 경우 완전히 생략하려면 다음을 사용했습니다.

ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"

사용법 예 :

<div ng-attr-class="{{params.type == 'test' ? 'itWasTest' : undefined }}">

겠습니까 출력 <div class="itWasTest">또는 <div>값에 따라params.type

<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>

isTrue = true 일 때 생성됩니다. <h1 contenteditable="true">{{content.title}}</h1>

isTrue = false 일 때 : <h1>{{content.title}}</h1>

허용 된 솔루션 인 Ashley Davis가 게시 한 솔루션에 대해 설명 된 방법은 할당 된 값이 정의되지 않았다는 사실에 관계없이 DOM에 속성을 인쇄합니다.

예를 들어, ng-model과 value 속성이 모두있는 입력 필드 설정에서 :

<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />

myValue의 배후에 관계없이 value 속성은 여전히 ​​DOM에 인쇄되어 해석됩니다. 그러면 Ng 모델이 재정의됩니다.

약간 불쾌하지만 ng-if를 사용하면 트릭이 수행됩니다.

<input type="text" name="myInput" data-ng-if="value" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
<input type="text" name="myInput" data-ng-if="!value" data-ng-model="myModel" />

ng-if 지시문 내에서 더 자세한 검사를 사용하는 것이 좋습니다. :)

또한 다음과 같은 표현식을 사용할 수 있습니다.

<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>

나는 실제로 몇 달 전에이 작업을 수행하기 위해 패치를 작성했습니다 (누군가가 freenode의 #angularjs에서 요청한 후).

아마도 병합되지는 않지만 ngClass와 매우 유사합니다 : https://github.com/angular/angular.js/pull/4269

병합 여부에 관계없이 기존 ng-attr- * 항목은 사용자가 제안하는 더 많은 ngClass 스타일 기능보다 약간 복잡하지만 (다른 사람들이 언급했듯이) 아마도 귀하의 요구에 적합 할 것입니다.

입력 필드 유효성 검사를 위해 다음을 수행 할 수 있습니다.

<input ng-model="discount" type="number" ng-attr-max="{{discountType == '%' ? 100 : undefined}}">

이것은 다음과 같이 정의 된 경우에만 속성 max을 적용합니다.100discountType%

편집 :이 답변은 Angular2 +와 관련이 있습니다! 죄송합니다. 태그가 누락되었습니다!

원래 답변 :

특정 입력 값이 설정된 경우에만 속성을 적용 (또는 설정)하려는 매우 간단한 경우에 관해서는

<my-element [conditionalAttr]="optionalValue || false">

다음과 같습니다.

<my-element [conditionalAttr]="optionalValue ? optionalValue : false">

(그렇지 않으면 optionalValue가 적용되고 그렇지 않으면 표현식이 false이고 속성이 적용되지 않습니다.)

예 : 색상을 적용했지만 임의의 스타일을 적용 한 경우가 있습니다 (@Input () 색상이 지정되지 않은 경우에도).

@Component({
  selector: "rb-icon",
  styleUrls: ["icon.component.scss"],
  template: "<span class="ic-{{icon}}" [style.color]="color==color" [ngStyle]="styleObj" ></span>",
})
export class IconComponent {
   @Input() icon: string;
   @Input() color: string;
   @Input() styles: string;

   private styleObj: object;
...
}

따라서 "style.color"는 색상 속성이있을 때만 설정되었습니다. 그렇지 않으면 "styles"문자열의 색상 속성을 사용할 수 있습니다.

물론 이것은 또한 달성 할 수 있습니다

[style.color]="color" 

과

@Input color: (string | boolean) = false;

Angular 2에 대한 솔루션이 필요한 경우 다음과 같은 간단한 속성 바인딩을 사용하십시오.

<input [readonly]="mode=='VIEW'"> 

이 작업을 수행 할 수있었습니다.

ng-attr-aria-current="{{::item.isSelected==true ? 'page' : undefined}}"

여기서 좋은 점은 item.isSelected가 false이면 속성이 단순히 렌더링되지 않는다는 것입니다.