Директива AngularJs ng-if не работает?

Question

Директива AngularJs ng-if не работает?

0

Я очень новичок в AngularJs, поэтому я не уверен в синтаксисе ngif. У меня есть таблица, и мне нужно изменить класс <td> зависимости от значения component.status. Все работает, за исключением директивы ngif

Мой массив:

$scope.components = 
    [
    {type: "Dispacther",        component: "Dispatcher2",  created: "2016-05-20T01:44:56.113", status: "Live"},
    {type: "Mobilizer",         component: "Mobility3",    created: "2016-05-25T07:34:30.019", status: "Down"},
    {type: "Listener",          component: "ADT 22146",    created: "2016-05-20T01:44:56.113", status: "Live"},
    {type: "OutBound Charge",   component: "Billing 92",   created: "2016-05-20T01:44:56.113", status: "Live"},
    {type: "Listener",          component: "22064",        created: "2016-05-20T01:44:56.113", status: "Live"},
    {type: "Dispacther",        component: "Dispacther1",  created: "2016-05-21T00:48:50.433", status: "Warning"}
];

Моя попытка:

  <tr ng-repeat="component in components">
  <td >{{component.type}}</td>
  <td>{{component.component}}</td>
  <td>{{component.created}}</td>
  <td ng-if="component.status == Live" class="alert-success">{{component.status}}</td>
  <td ng-if="component.status == Warning" class="alert-warning">{{component.status}}</td>
  <td ng-if="component.status == Down" class="alert-danger">{{component.status}}</td>
  </tr>

Eoghan Buckley 27 май 2016, в 17:45

Источник

0

почему бы не использовать директиву ng-class, проверьте документы здесь docs.angularjs.org/api/ng/directive/ngClass
Ayoub 27 май 2016, в 15:39
2

Если я правильно помню, вы хотите обернуть Live т.д. в одинарные кавычки, если они не являются переменными области видимости
Sterling Archer 27 май 2016, в 15:39
0

@SterlingArcher Это сработало отлично. Большое спасибо.
Eoghan Buckley 27 май 2016, в 15:41
0

Чтобы расширить комментарии @AyoubOlk, вот рабочий пример класса ng: jsfiddle.net/qbe07cy4
Rob 27 май 2016, в 15:51

Показать ещё 2 комментария

Теги:

html

angularjs

angularjs-directive

2 ответа

2

Live - это строка не переменная и для сравнения двух элементов, используйте === (сравнить value и type сравнения) вместо == (просто сравните value). Изменить:

<td ng-if="component.status == Live" class="alert-success">{{component.status}}</td>

Для того, чтобы:

<td ng-if="component.status === 'Live'" class="alert-success">{{component.status}}</td>

Но в вашем случае, я думаю, вы должны использовать ng-class. Изменить:

<td ng-if="component.status == Live" class="alert-success">{{component.status}}</td>
<td ng-if="component.status == Warning" class="alert-warning">{{component.status}}</td>
<td ng-if="component.status == Down" class="alert-danger">{{component.status}}</td>

Для того, чтобы:

<td ng-class="{'alert-success': component.status === 'Live', 'alert-warning':  component.status === 'Warning', 'alert-danger': component.status === 'Down'}">{{component.status}}</td>

Внутри ng-class: {'alert-success': component.status === 'Live', 'alert-warning': component.status === 'Warning', 'alert-danger': component.status === 'Down'}

WorkWe 27 май 2016, в 12:56

Ещё вопросы

почему бы не использовать директиву ng-class, проверьте документы здесь docs.angularjs.org/api/ng/directive/ngClass
Если я правильно помню, вы хотите обернуть Live т.д. в одинарные кавычки, если они не являются переменными области видимости
@SterlingArcher Это сработало отлично. Большое спасибо.
Чтобы расширить комментарии @AyoubOlk, вот рабочий пример класса ng: jsfiddle.net/qbe07cy4

Shadi Shaaban · Accepted Answer · 2016-05-27T13-17-00.000Z

Ваш код будет работать, однако вам нужно инкапсулировать значение статуса кавычками '' (ng-if = "component.status == 'Live'")

  <tr ng-repeat="component in components">
  <td >{{component.type}}</td>
  <td>{{component.component}}</td>
  <td>{{component.created}}</td>
  <td ng-if="component.status == 'Live'" class="alert-success">{{component.status}}</td>
  <td ng-if="component.status == 'Warning'" class="alert-warning">{{component.status}}</td>
  <td ng-if="component.status == 'Down'" class="alert-danger">{{component.status}}</td>
  </tr>