Подсчет выбранного флажка в AngularJS

#angularjs #checkbox #count #smart-table

#angularjs #флажок #подсчет #смарт-таблица

Вопрос:

Мне трудно подсчитывать выбранные флажки в моем приложении. Я попытался ответить на некоторые другие вопросы о переполнении стека, но пока без кубиков … если у вас, ребята, есть опыт подсчета флажков, некоторая помощь была бы отличной.

HTML:

 <div class="row">
      <div class="col-md-12">
        <table id="document-table" st-table="documents" st-safe-src="yourDisplayedCollection" class="table">
         <div>Total checked: ({{selectedCounter}})</div>
          <thead>
            <tr>
              <th>
                <st-select-all all="yourDisplayedCollection"></st-select-all>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="document in documents">
              <td><input type="checkbox" ng-model="document.isSelected"/></td>
            </tr>
          </tbody>
         </table>
      </div>
    </div>

Контроллер:

.контроллер (‘DocumentsController’, /** @ngInject */ функция ($scope, restData, DateFormats, documents) {

   $scope.dateFormat = dateFormats.angularDateFilter;
  $scope.documents = documents.resultBag[0].documentBag;
  $scope.yourDisplayedCollection = [].concat(documents.resultBag[0].documentBag);
  $scope.selectAll = function (selected) {
        var documents = $scope.documents;
        angular.forEach(documents, function (documents) {
            documents.selected = selected;
        });
        // Update the counter
        if(selected){
            $scope.selectedCounter = documents.length;
        } else {
            $scope.selectedCounter = 0;
        }
    };

Редактировать:
У меня есть флажок «установить все флажки» вверху, поэтому у меня есть yourDisplayedCollection в таблице, а также ng-model=»document.IsSelected»

1. у вас есть несколько проблем… один из них является дочерней областью ng-repeat . Могут ли эти флажки быть привязаны к свойству каждого документа? Или они должны быть отдельными?

2. Взгляните на мой ответ ниже. Вам нужно взглянуть на приведенный выше пример и переделать его, чтобы он имел больше смысла.

3. ngcoderscope.wordpress.com/2016/08/12/multi-checkbox-directive надеюсь , эта директива пригодится вам !

Ответ №1:

Вам нужно переработать пару вещей, если я правильно понимаю ожидаемый результат.

Первый (html):

 <tr ng-repeat="document in documents">
  //Bind your model directily to the selected property in your object (document)
    <td><input type="checkbox" ng-model="document.selected"/></td>
</tr>

Второй:

 $scope.selectAll = function (selected) {
    var documents = $scope.documents;
    angular.forEach(documents, function (doc) {
        if(doc.selected)
           $scope.selectedCounter  =1;
    });

};

Это даст вам правильный подсчет каждый раз. Хотя ваше имя функции вводит в заблуждение. selectAll должно означать буквально выбрать все. Для меня это похоже на то, что вы просто считаете.

Ответ №2:

Самый простой способ сделать это — использовать Array.prototype.filter() и использовать длину отфильтрованного массива

 <input type="checkbox" ng-model="document.selected"/>

И для счетчика:

 $scope.selectedCounter = $scope.documents.filter(function(item){
    return item.selected;
}).length;

Необходимо знать, что вы нарушаете золотое правило всегда использовать объект в ng-model .

ng-repeat создает дочернюю область, и когда вы используете примитив в дочерней области, родительский контроллер не может видеть его изменения