передача объектов $ scope в троичное условие ng-if и ng-класса не работает

#javascript #angularjs

#javascript #angularjs

Вопрос:

  **main.js:**

     $scope.status = [
            {name:'SQL', stat:"up"},
            {name:'Web Server', stat:"down"},
            {name:'Index', stat:"down"}
        ];

**index.html:**
  <table>
    <tr>
      <td ng-repeat="x in status">
        <div ng-if="{{x.name}}=='SQL'"> {{x.stat}} </div>
      </td>
    </tr>
  </table>

    <table>
      <tr>
        <td ng-repeat="x in status">
          <div ng-if="{{x.name}}=='SQL'" ng-class="{{x.stat}}=='up'? 'squareGreen':'squareRed'"> {{x.name  " : " x.stat}} </div>
        </td>
      </tr>
    </table>
  

Я пытаюсь передать массив status в index.html чтобы сравнить ‘name’ со строкой, затем примените класс squaregreen или red в зависимости от сравнения ‘stat’ с ‘up’ или ‘down’. Цель состоит в том, чтобы соответствовать имени сервера и применять зеленый цвет при включении и красный при выключении. У меня есть 2 проблемы, описанные ниже. 1. ошибка синтаксического анализа для ng-if 2. все серверы применяются в квадрате, хотя «статистика» 1-го сервера (sql) «работает»

Ответ №1:

Удалите все фигурные скобки из ваших выражений ng-if и ng-class , и это должно сработать. Например:

main.js:

  $scope.status = [
        {name:'SQL', stat:"up"},
        {name:'Web Server', stat:"down"},
        {name:'Index', stat:"down"}
    ];

**index.html:**
  <table>
    <tr>
      <td ng-repeat="x in status">
        <div ng-if="x.name=='SQL'"> {{x.stat}} </div>
      </td>
    </tr>
  </table>

    <table>
      <tr>
        <td ng-repeat="x in status">
          <div ng-if="x.name=='SQL'" ng-class="x.stat=='up'? 'squareGreen':'squareRed'"> {{x.name  " : " x.stat}} </div>
        </td>
      </tr>
    </table>
  

Фигурные скобки здесь не нужны, потому что ng-if и ng-class привязки уже вычисляются как выражения области видимости. Используйте фигурные скобки, когда директива не выполняет этого по умолчанию (например, с привязками ‘@’). Документы AngularJS по привязке области

Ответ №2:

Уберите свои фигурные скобки. ng-if="x.name === 'SQL'"

Ответ №3:

Вам не нужно использовать {{}} оператор экстраполяции внутри ng-if , и вам нужно использовать {} в вашем ng-class

  <div ng-if="x.name == 'SQL'" ng-class="{x.stat=='up'? 'squareGreen':'squareRed'}"> {{x.name  " : " x.stat}} </div>