нг-если скрыть / показать строку, когда значение = 0

Question

нг-если скрыть / показать строку, когда значение = 0

0

В таблице есть столбцы - ID, PASSED, FAILED, и есть флажок -show студентов без каких-либо сбоев

Я не могу понять, как использовать угловой ng - если привязать флажок к таблице. Поэтому, если пользователь проверяет флажок, он должен показывать все строки еще только ученикам без сбоев. Я новичок в angularJS: |

<tr>

    <td><span class="CheckBox"><input type="checkbox" value="">Show Students with No Failures</span></td>
        </tr>

<tbody ><!--display none-->

  <tr ng-repeat="t in table">
    <td colspan="1" ng-hide='t.Failed===0'>{{t.id}}</td>
    <td colspan="1" ng-hide='t.Failed===0'>{{t.Total}</td>
    <td colspan="1" ng-hide='t.Failed===0'>{{t.Passed}}</td>
    <td colspan="1" ng-hide='t.Failed===0'>{{t.Failed}}</td>
  </tr>

matrixguy 01 авг. 2016, в 16:31

Источник

0

У вас есть код, чтобы показать нам? что ты уже испробовал?
tpsilva 01 авг. 2016, в 14:29
0

пожалуйста, укажите, что вы пытались
Harshil 01 авг. 2016, в 14:29
0

я не могу понять, чен нг скрыть значение. Кроме того, обнаружил, что нг-если был быстрее, поэтому я пытался нг-если
matrixguy 01 авг. 2016, в 14:33

Показать ещё 1 комментарий

Теги:

angularjs

angular-ng-if

3 ответа

0

Вместо того, чтобы делать ng-hide на каждом <td>, делайте это на tr уровне. Кроме того, привяжите к ng-model с помощью вашего флажка, чтобы иметь возможность использовать его:

<tr>
    <td>
        <span class="CheckBox">
            <input type="checkbox" 
                   ng-model="showNoFailures">Show Students with No Failures
        </span>
    </td>
</tr>
<tr ng-repeat="t in table"
    ng-if="t.Failed === 0 || showNoFailures">
    <!-- show if all passed, or the cb is checked -->
    <td colspan="1">{{t.id}}</td>
    <td colspan="1">{{t.Total}}</td>
    <td colspan="1">{{t.Passed}}</td>
    <td colspan="1">{{t.Failed}}</td>
</tr>

См. Этот рабочий jsfiddle

devqon 01 авг. 2016, в 13:07

0

он должен показывать все с ошибкой = 0, когда флажок установлен, иначе таблица должна показывать все строки. И спасибо, я понимаю, как использовать нг-если сейчас.
matrixguy 01 авг. 2016, в 15:07

0

Я бы не использовал для этого ng-if или ng-show/ng-hide. Я бы использовал фильтр в вашем выражении ng-repeat для фильтрации значений массива.

фильтр UI

'<input type="checkbox" ng-model="filterObj.Failed">'

Таблица

'ng-repeat="t in table | filter:filterObj"'

Что-то в этом роде. Ваши логические ключи свойств немного запутывают меня, но в основном ключи filterObj должны совпадать с ключами, найденными на ваших табличных объектах.

codepen - http://codepen.io/pen?template=zrGjgW

jusopi 01 авг. 2016, в 11:47

Ещё вопросы

У вас есть код, чтобы показать нам? что ты уже испробовал?
пожалуйста, укажите, что вы пытались
я не могу понять, чен нг скрыть значение. Кроме того, обнаружил, что нг-если был быстрее, поэтому я пытался нг-если
он должен показывать все с ошибкой = 0, когда флажок установлен, иначе таблица должна показывать все строки. И спасибо, я понимаю, как использовать нг-если сейчас.

daan.desmedt · Accepted Answer · 2016-08-01T12-28-00.000Z

Добавлена реализация того, что вы пытаетесь выполнить.

Использование ng-repeat в сочетании с filter.

См. JSFIDDLE

ПОСМОТРЕТЬ

<div id="app" ng-app="myApp" ng-controller="myCtrl">

  Only passes students?
  <input type="checkbox" ng-init="passes = true" ng-model="passes">
  <br/> Not passed student students?
  <input type="checkbox" checked ng-init="fails = true" ng-model="fails">
  <br/>
  <br/>
  <table cellspacing="0" cellpadding="0">
    <tbody>
      <tr class="days">
        <th>Student name</th>
        <th>#FAILS</th>
        <th>PASSED?</th>
      </tr>
      <tr ng-repeat="student in studentData | filter: studentFilter">
        <td>{{ student.name }}</td>
        <td>{{ student.fails }}</td>
        <td>
          {{ (student.fails <=0 ) ? 'YES' : 'NO' }} </td>
      </tr>
    </tbody>
  </table>


</div>

КОНТРОЛЛЕР

var app = angular.module('myApp', [])

app.controller('myCtrl', function($scope) {

  $scope.studentFilter = function (item) { 
        if($scope.passes && $scope.fails) return item;
      if($scope.passes && item.fails <= 0) return item;
      if($scope.fails && item.fails > 0) return item;
  };


  $scope.studentData = [{
    id: 1,
    name: 'Nabil',
    fails: 1
  }, {
    id: 2,
    name: 'Daan',
    fails: 0
  }, {
    id: 3,
    name: 'Walter',
    fails: 2
  }, {
    id: 4,
    name: 'Magaly',
    fails: 0
  }, {
    id: 5,
    name: 'Steven',
    fails: 2
  }, {
    id: 6,
    name: 'Bill',
    fails: 0
  }];
});