Кнопка включения/отключения в AngularJS

У меня есть таблица с флажком. Он имеет функцию выбора ВСЕХ javascript и функцию выбора по одному. Мой html-файл для кнопки удаления выглядит следующим образом:

<button data-toggle="modal" data-target="#rejectModal" contenteditable="false" id="delbutton" ng-model="delbutton" ng-disabled="countChecked() == 0">Delete</span></button>

Выбрать все Флажок:

<th class="">
    <input type="checkbox" name="select" id="checkAll" ng-model="selectAllRawSCP"/>
</th>

детали таблицы:

<tr ng-repeat=" item in rawSCAP | orderBy:sort">
   <td>
        <input type="checkbox" name="select" value="checked" ng-model="item.checked"/>
    </td>

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

$scope.countChecked = function(){
            var count = 0;
            angular.forEach($scope.rawSCAP, function(value){
                if (value.checked) count++;
            });

            return count;
        }

Но, используя это, моя страница возвращает ошибку, которая isTypeError: Невозможно прочитать свойство «проверено» из null Ошибка

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


javascript html angularjs disabled-input
person bleyk    schedule 29.09.2017    source источник
comment
не могли бы вы вставить сюда плунжер?   -  person user93    schedule 29.09.2017
comment
каково значение $scope.rawSCAP в цикле   -  person user93    schedule 29.09.2017

Ответы (2)


arrow_upward
0
arrow_downward

Ошибка довольно ясна, она не может получить доступ к свойству checked элемента rawSCAP. Вы должны гарантировать, что проверенное свойство rawSCAP itens не равно нулю, прежде чем пытаться использовать его в ng-модели.

Вы можете попытаться инициализировать его раньше с некоторым значением, которое вы хотите. Проверьте это, как это сделать.

person inafalcao    schedule 29.09.2017

arrow_upward
0
arrow_downward

Есть несколько условий, которые необходимо выполнить, чтобы использовать <<ng-model>>.checked, который представляет собой простой массив, который нельзя использовать для флажка, он должен быть array of objects. Также, пожалуйста, измените свою функцию на приведенную ниже.

  $scope.countChecked = function() {
    var count = 0;
    angular.forEach($scope.rawSCAP, function(value) {
        value.checked = value.checked || 0;
      if (value.checked) count++;
    });

    return count;
  }

Основная строка, которая выполняет работу, это value.checked = value.checked || 0;. Здесь, если value.checked не определено, то 0 будет назначено value.checked, поэтому вы не получите ошибку!

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

app.controller('MyController', function MyController($scope) {
  $scope.rawSCAP = [{
    item: 1
  }, {
    item: 2
  }, {
    item: 3
  }, {
    item: 4
  }, {
    item: 5
  }, {
    item: 6
  }, {
    item: 7
  }];

  $scope.countChecked = function() {
    var count = 0;
    angular.forEach($scope.rawSCAP, function(value) {
    	value.checked = value.checked || 0;
      if (value.checked) count++;
    });

    return count;
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <button data-toggle="modal" data-target="#rejectModal" contenteditable="false" id="delbutton" ng-model="delbutton" ng-disabled="countChecked() == 0">Delete</button>
  <table>
    <th class="">
      <input type="checkbox" name="select" id="checkAll" ng-model="selectAllRawSCP" />
    </th>
    <tr ng-repeat=" item in rawSCAP | orderBy:sort">
      <td>
        <input type="checkbox" name="select" value="checked" ng-model="item.checked" />{{item.item}}
      </td>
    </tr>
  </table>

</div>

person Naren Murali    schedule 29.09.2017
comment
@bleykFaust Помогает ли вам этот ответ? - person Naren Murali; 02.10.2017