Angularjs Se dichiarazioni?

Question

Quindi sto attraversando il tutorial per Angularjs:

Ho un array definito nel controller e sto restituendo punti diversi nell'array chiamando quando sto looping tramite ng-ripetizione {{feature.name}} {{feature.description}}

Quello che non capisco è lascia dire che ho un terzo punto dell'array chiamato "importanza" ed è un numero da 1 a 10. Non voglio mostrare quel numero nell'Html ma quello che voglioPer fare è applicare un colore diverso alla funzione se tale numero "importanza" nell'array è 10 vs 1

Allora come scrivo una dichiarazione se per fare questo:

I.e.

<p style="**insert if statement: {{if feature.importance == 10}} color:red; {{/if}} **">{{feature.description}}</p>

.

Nessuna idea se è giusto ma è quello che voglio fare

Answer 1

Prima è una direttiva che valuta se qualcosa dovrebbe essere nel DOM solo una volta e non aggiunge agli ascoltatori di orologi alla pagina:

angular.module('setIf',[]).directive('setIf',function () {
    return {
      transclude: 'element',
      priority: 1000,
      terminal: true,
      restrict: 'A',
      compile: function (element, attr, linker) {
        return function (scope, iterStartElement, attr) {
          if(attr.waitFor) {
            var wait = scope.$watch(attr.waitFor,function(nv,ov){
              if(nv) {
                build();
                wait();
              }
            });
          } else {
            build();
          }

          function build() {
            iterStartElement[0].doNotMove = true;
            var expression = attr.setIf;
            var value = scope.$eval(expression);
            if (value) {
              linker(scope, function (clone) {
                iterStartElement.after(clone);
                clone.removeAttr('set-if');
                clone.removeAttr('wait-for');
              });
            }
          }
        };
      }
    };
  });

.

Questo secondo è una direttiva che applica condizionatamente gli attributi agli elementi solo una volta senza ascoltatori di orologi:

I.e.

<div set-attr="{ data-id : post.id, data-name : { value : post.name, condition : post.name != 'FOO' } }"></div>

angular.module('setAttr',[]).directive('setAttr', function() {
  return {
    restrict: 'A',
    priority: 100,
    link: function(scope,elem,attrs) {
      if(attrs.setAttr.indexOf('{') != -1 && attrs.setAttr.indexOf('}') != -1) {
      //you could just angular.isObject(scope.$eval(attrs.setAttr)) for the above but I needed it this way
        var data = scope.$eval(attrs.setAttr);

        angular.forEach(data, function(v,k){

          if(angular.isObject(v)) {
            if(v.value && v.condition) {
                elem.attr(k,v.value);
                elem.removeAttr('set-attr');
            }
          } else {
            elem.attr(k,v);
            elem.removeAttr('set-attr');
          }
        });
      }
    }
  }
});

.

Ovviamente il tuo possibile utilizzare versioni dinamiche integrate in angolari:

<div ng-class="{ 'myclass' : item.iscool }"></div>

.

È inoltre possibile utilizzare la nuova NG-se aggiunta da Angularjs che sostanzialmente sostituisce l'interfaccia utente, se creata dal team angolari, aggiungerà e rimuoverà condizionatamente le cose dal DOM e aggiungerà gli ascoltatori di orologi per continuare a valutare:

<div ng-if="item.iscool"></div>

.

Answer 2

Non penso che ci sia una dichiarazione if disponibile. Per lo scopo dello stile, è possibile utilizzare ng-class.

<p ng-class="{important: feature.importance == 10 }">

.

ng-switch è anche conveniente.

- Aggiornamento -

Dai un'occhiata a: https://stackoverflow.com/a/18021855/1238847

Angular1.2.0RC sembra avere il supporto NG-IF.

Answer 3

In realtà è un operatore ternario in Angular 1.2.0.

<p style="{{feature.importance == 10 ? 'color:red' : ''}}">{{feature.description}}</p>

.

Answer 4

Penso che la risposta abbia bisogno di un aggiornamento.

In precedenza è possibile utilizzare la direttiva NGIF dal progetto Angularui (codice qui Se vuoi ancora scaricarlo), cattive notizie è che non è più mantenuto.

La buona notizia è che è stata aggiunta al repo dell'Angularjs ufficiale ( Branch instabile ) e presto sarà disponibile in Stabile one .

<div ng-if="something"> Foo bar </div>

.

Non nasconderà semplicemente l'elemento DIV, ma rimuoverlo anche da Dom (quando qualcosa è falso).

Answer 5

NG-Class è probabilmente la migliore risposta al tuo problema, ma Angularui ha una direttiva "IF":

http://angular-ui.github.com/

Ricerca di: Rimuovere completamente gli elementi dal DOM invece di nasconderlo.

Ho usato "UI-IF" per decidere se dovevo rendere un valore dati come etichetta o un input, relativo al mese corrente:

<tbody id="allocationTableBody">
    <tr ng-repeat="a in data.allocations">
        <td>{{a.monthAbrv}}</td>
        <td ui-if="$index < currentMonth">{{a.amounts[0]}}</td>
    </tr>
</tbody>

.

Answer 6

Nel caso in cui la tua priorità sarebbe un'etichetta, è possibile creare un filtro dell'interruttore da utilizzare all'interno della classe NG come mostrato in una risposta in precedenza: https://stackoverflow.com/a/8309832/1036025 (per il codice del filtro dell'interruttore)

<p ng-class="feature.importance|switch:{'Urgent':'red', 'Warning': 'orange', 'Normal': 'green'}">...</p>

.

Answer 7

Puoi anche provare questa linea di codice sotto

<div class="{{is_foo && foo.bar}}">

.

che mostra foo.bar se is_foo è vero.

Answer 8

Che cosa funziona anche:

<span>{{ varWithValue || 'If empty use this string' }}</span> 

.