Jaki jest najlepszy sposób warunkowego zastosowania atrybutów w AngularJS?

Muszę być w stanie dodać na przykład „contentediable” do elementów, w oparciu o zmienną boolowską w zakresie.

Przykładowe zastosowanie:

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

Spowodowałoby to dodanie contenteditable = true do elementu, gdyby $scope.editModebył ustawiony na true. Czy jest jakiś prosty sposób na implementację takiego zachowania atrybutu klasy ng? Rozważam napisanie dyrektywy i podzielenie się, jeśli nie.

Edycja: Widzę, że istnieją pewne podobieństwa między moją proponowaną dyrektywą attrs a ng-bind-attrs, ale została ona usunięta w wersji 1.0.0.rc3 , dlaczego tak jest?

Korzystam z następujących opcji, aby warunkowo ustawić klasę attr, gdy nie można użyć klasy ng (na przykład podczas stylowania SVG):

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

To samo podejście powinno działać w przypadku innych typów atrybutów.

(Myślę, że musisz używać najnowszego niestabilnego Angulara, aby używać ng-attr-, aktualnie jestem na wersji 1.1.4)

Możesz poprzedzać atrybuty, ng-attraby ewaluować wyrażenie kątowe. Gdy wynik wyrażeń jest niezdefiniowany, usuwa to wartość z atrybutu.

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

Produkuje (gdy wartość jest fałszywa)

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

Nie używaj, falseponieważ spowoduje to wygenerowanie słowa „fałsz” jako wartości.

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

Podczas korzystania z tej sztuczki w dyrektywie. Atrybuty tej dyrektywy będą fałszywe, jeśli nie będą mieć wartości.

Na przykład powyższe byłoby fałszywe.

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

Pracowałem nad tym, ciężko ustawiając atrybut. I kontrolowanie stosowalności atrybutu za pomocą wartości logicznej dla atrybutu.

Oto fragment kodu:

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

Mam nadzieję, że to pomoże.

W najnowszej wersji Angulara (1.1.5) wprowadzono dyrektywę warunkową o nazwie ngIf. To różni się od ngShowi ngHidetym, że elementy nie są ukryte, ale nie ujęte w DOM w ogóle. Są bardzo przydatne w przypadku komponentów, których tworzenie jest kosztowne, ale nie są używane:

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

Aby uzyskać atrybut pokazujący określoną wartość opartą na czeku logicznym lub zostać całkowicie pominięty, jeśli sprawdzenie boolean się nie powiodło, zastosowałem:

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

Przykładowe użycie:

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

Wyprowadziłby <div class="itWasTest">lub <div>na podstawie wartościparams.type

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

wygeneruje, gdy isTrue = true: <h1 contenteditable="true">{{content.title}}</h1>

a kiedy isTrue = false: <h1>{{content.title}}</h1>

W odniesieniu do przyjętego rozwiązania, opublikowanego przez Ashleya Davisa, opisana metoda nadal drukuje atrybut w DOM, niezależnie od tego, że przypisana mu wartość jest niezdefiniowana.

Na przykład w konfiguracji pola wejściowego z zarówno modelem ng, jak i atrybutem wartości:

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

Niezależnie od tego, co kryje się za myValue, wartość atrybut nadal jest drukowany w DOM, a zatem interpretowany. Model Ng zostaje wtedy zastąpiony.

Trochę nieprzyjemne, ale użycie ng-if działa:

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

Poleciłbym bardziej szczegółowe sprawdzenie w dyrektywach ng-if :)

Możesz także użyć takiego wyrażenia:

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

Kilka miesięcy temu napisałem łatkę, aby to zrobić (po tym, jak ktoś zapytał o to w #angularjs na freenode).

Prawdopodobnie nie zostanie scalony, ale jest bardzo podobny do ngClass: https://github.com/angular/angular.js/pull/4269

Niezależnie od tego, czy zostanie scalony, czy nie, istniejące elementy ng-attr- * są prawdopodobnie odpowiednie dla twoich potrzeb (jak wspomnieli inni), chociaż mogą być nieco bardziej skomplikowane niż sugerowana funkcjonalność w stylu ngClass.

Aby sprawdzić poprawność pola wejściowego, możesz:

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

Będzie to miało zastosowanie atrybut maxaby 100tylko jeśli discountTypejest zdefiniowana jako%

Edycja : Ta odpowiedź dotyczy Angular2 +! Przepraszam, brakowało mi tagu!

Oryginalna odpowiedź:

Jeśli chodzi o bardzo prosty przypadek, w którym chcesz zastosować (lub ustawić) atrybut tylko, jeśli ustawiono określoną wartość wejściową, jest to tak proste, jak

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

To jest tak samo jak:

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

(Tak więc opcjonalneWartość jest stosowana, jeśli podano inaczej wyrażenie jest fałszywe i atrybut nie jest stosowany).

Przykład: miałem przypadek, w którym pozwalałem zastosować kolor, ale także dowolne style, w których atrybut koloru nie działał tak, jak został już ustawiony (nawet jeśli nie podano koloru @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;
...
}

Zatem „style.color” został ustawiony tylko wtedy, gdy istniał atrybut color, w przeciwnym razie można użyć atrybutu color w ciągu „styles”.

Oczywiście można to również osiągnąć za pomocą

[style.color]="color" 

i

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

Na wypadek, gdybyś potrzebował rozwiązania dla Angulara 2, skorzystaj z powiązania właściwości, jak poniżej, np. Jeśli chcesz, aby dane wejściowe były odczytywane tylko warunkowo, a następnie dodaj w nawiasach kwadratowych atrybut attrbute, a następnie znak = i wyrażenie.

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

Udało mi się uruchomić to:

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

Zaletą jest to, że jeśli item.isSelected ma wartość false, wówczas atrybut po prostu nie jest renderowany.