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.editMode
był 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?
angularjs
angularjs-directive
Kenneth Lynne
źródło
źródło
ng-attr="expression"
.contentEditable
dyrektywę.<h1 ng-attr-contenteditable="{{editMode && true : false}}">{{content.title}}</h1>
Odpowiedzi:
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):
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)
źródło
ng-attr-
, kompilator usunie prefiks i doda atrybut z jego wartością związaną z wynikiem wyrażenia kątowego z oryginalnej wartości atrybutu.Możesz poprzedzać atrybuty,
ng-attr
aby ewaluować wyrażenie kątowe. Gdy wynik wyrażeń jest niezdefiniowany, usuwa to wartość z atrybutu.Produkuje (gdy wartość jest fałszywa)
Nie używaj,
false
ponieważ spowoduje to wygenerowanie słowa „fałsz” jako wartości.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.
źródło
undefined
jest to szczególny przypadek. „Podczas korzystania z ngAttr używana jest flaga allOrNothing zmiennej $ interpolate, więc jeśli jakiekolwiek wyrażenie w interpolowanym ciągu powoduje niezdefiniowanie, atrybut jest usuwany i nie dodawany do elementu.”ng-attr-foo
nadal będzie zawsze powoływać się nafoo
dyrektywę, jeśli istnieje, nawetng-attr-foo
ocenia sięundefined
. dyskusjaPracowałem nad tym, ciężko ustawiając atrybut. I kontrolowanie stosowalności atrybutu za pomocą wartości logicznej dla atrybutu.
Oto fragment kodu:
Mam nadzieję, że to pomoże.
źródło
W najnowszej wersji Angulara (1.1.5) wprowadzono dyrektywę warunkową o nazwie
ngIf
. To różni się odngShow
ingHide
tym, ż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:źródło
<h1 ng-if="editMode" contenteditable="true"><h1 ng-if="!editMode">
ng-if
tworzy nowy zakres.ng-if
tworzy nowy zakres, aleng-show
tego nie robi. Ta niekonsekwencja zawsze była dla mnie bolącym miejscem. Defensywna reakcja programowa na to brzmi: „zawsze wiąż coś z kropką w wyrażeniu” i nie będzie to problemem.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
źródło
<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>
źródło
<h1 ng-attr-contenteditable="{{isTrue ? 'row' : undefined}}">{{content.title}} </h1>
<video ng-attr-autoplay="{{vm.autoplay || undefined}}" />
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:
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:
Poleciłbym bardziej szczegółowe sprawdzenie w dyrektywach ng-if :)
źródło
Możesz także użyć takiego wyrażenia:
źródło
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.
źródło
Aby sprawdzić poprawność pola wejściowego, możesz:
Będzie to miało zastosowanie atrybut
max
aby100
tylko jeślidiscountType
jest zdefiniowana jako%
źródło
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
To jest tak samo jak:
(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 ()):
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ą
i
źródło
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.
źródło
Udało mi się uruchomić to:
Zaletą jest to, że jeśli item.isSelected ma wartość false, wówczas atrybut po prostu nie jest renderowany.
źródło