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

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

예를 들어 스코프의 부울 변수를 기반으로 요소에 "contentable"을 추가할 수 있어야 합니다.

사용 예:

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

=true가 요소에 됩니다.$scope.editMode was was was was was was was was로 설정되었습니다.true이 ng-class와 같은 속성 동작을 구현하는 쉬운 방법이 있습니까?지시문을 작성하고 그렇지 않다면 공유하는 것을 고려하고 있습니다.

편집: 제안하신 attrs 지시와 ng-bind-attrs 사이에 유사한 점이 있는 것 같습니다만, 1.0.0.rc3에서 삭제되었습니다.이유는 무엇입니까?

ng-class를 사용할 수 없을 때(예를 들어 SVG 스타일링 시) 클래스 속성을 조건부로 설정하기 위해 다음을 사용합니다.

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

다른 어트리뷰트 타입에서도 같은 어프로치를 사용할 수 있습니다.

(ng-attr-를 사용하려면 최신의 불안정한 Angular를 사용해야 한다고 생각합니다.저는 현재 1.1.4입니다.)

앞에 Attribute를 붙일 수 .ng-attr각도 식을 평가합니다.표현식이 정의되지 않은 경우 속성에서 값이 삭제됩니다.

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

생성(값이 거짓인 경우)

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

러러 so so so so는 쓰지 마세요.false"거짓"이라는 단어를 가치로 만들어 낼 수 있기 때문입니다.

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

명령어로 이 트릭을 사용하는 경우.값이 없는 경우 디렉티브의 Atribut은 false가 됩니다.

예를 들어 위의 내용은 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는 르르르르르ngShow ★★★★★★★★★★★★★★★★★」ngHide요소는 숨겨져 있지 않지만 DOM에는 전혀 포함되어 있지 않습니다.작성에는 비용이 많이 들지만 사용되지 않는 컴포넌트에 매우 유용합니다.

<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>

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

True:가 True=false일 경우:<h1>{{content.title}}</h1>

Ashley Davis가 게시한 승인된 솔루션에 대해서는 할당된 값이 정의되지 않은 경우에도 설명된 방법이 여전히 DOM에 속성을 인쇄합니다.

예를 들어 ng-model Atribute와 값 Atribute를 모두 가진 입력 필드 셋업에서는 다음과 같이 합니다.

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

myValue의 배후에 무엇이 있든 간에 값 속성은 여전히 DOM에 인쇄되므로 해석됩니다.그러면 Ng-model이 덮어쓰게 됩니다.

조금 불쾌하지만 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>

실제로 몇 달 전에 (누군가 #engularjs in the freenode)라고 물어본 후 패치를 작성했습니다.

통합되지 않을 수도 있지만 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로.100이 경우에만discountType로 정의됩니다.%

편집: 이 답변은 Angular2+와 관련이 있습니다!죄송해요, 태그를 놓쳤어요!

원답:

특정 입력 값이 설정된 경우에만 속성을 적용(또는 설정)하려는 매우 간단한 경우에는 다음과 같이 간단합니다.

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

다음과 같습니다.

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

(따라서 optionalValue는 식이 false이고 Atribute가 적용되지 않은 경우 적용됩니다).

예:예를 들어 색상뿐만 아니라 임의의 스타일도 적용했습니다.색상 속성은 이미 설정되어 있는 대로 동작하지 않습니다(@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"는 색상 속성이 있을 때만 설정되며, 그렇지 않을 경우 "style" 문자열의 색상 속성을 사용할 수 있습니다.

물론, 이것은, 다음의 방법으로도 실현할 수 있습니다.

[style.color]="color" 

그리고.

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

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

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

여기서 좋은 점은 item.Selected가 false일 경우 속성이 렌더링되지 않는다는 것입니다.

Angular 2에 대한 솔루션과 간단한 솔루션이 필요한 경우, 다음과 같은 속성 바인딩을 사용합니다(예: 입력을 조건부로만 읽기를 원하는 경우). 대괄호 안에 특성 뒤에 = 기호와 식을 추가합니다.

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

언급URL : https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs