AngularJS — инициировать ng-change на основе значения ng-модели

Итак, я столкнулся с проблемой, которую я потратил некоторое время на изучение и безрезультатно, не нашел рабочего решения.

Моя ситуация:

  • У меня есть ряды флажков, которые запускают функцию с ng-change (пользователь щелкает флажок).
  • Каждый флажок привязан к логическому значению ng-model независимо от того, установлен флажок или нет.
  • Для каждой строки у меня есть флажок «выбрать все», который запускает функцию, которая перебирает флажки в этой строке и обновляет логическое значение их ng-модели до значения true или false в зависимости от значения выбора всех.
  • В DOM выбор всех работает нормально, и каждое логическое значение флажка изменяется, что приводит к установке или снятию флажков.
  • Даже если логическое значение ng-model для флажков изменено с true на false, функция ng-change не запускается.

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

Я попытался изменить ng-change на ng-click и принудительно включить функцию выбора всех в .trigger('click'), которая вроде работает, но является хакерской и работает неправильно, если один из флажков уже нажат. Это приводит к тому, что это будет противоположное, если истинное значение.

Есть ли способ запустить функцию ng-change для флажка с контроллера, если пользователь не щелкает флажок напрямую? Я передаю параметры через функцию, поэтому ее нужно запускать из ng-change, а не только в контроллере.

Вот ссылка на JS Bin того, что я пытаюсь выполнить.

Если щелкнуть верхнее поле (выбрать все), заполнятся все нижние поля. Если щелкнуть одно из нижних полей, запустится функция ng-change, которая покажет некоторый текст в DOM запущенного. Он не показывает текст (не запускает ng-change), если нажата кнопка «Выбрать все».


javascript checkbox angularjs angularjs-ng-change
person qwert7465    schedule 04.08.2016    source источник
comment
Покажите нам код.   -  person developer033    schedule 04.08.2016
comment
Объяснения — это круто и все такое, но на самом деле они не могут показать нам, допустили вы небольшую ошибку или нет. Пожалуйста, покажите некоторый код, а также объяснение.   -  person Adam Harrison    schedule 04.08.2016
comment
Обновлен со ссылкой на js bin   -  person qwert7465    schedule 04.08.2016

Ответы (2)


arrow_upward
0
arrow_downward

Насколько я понимаю, вы хотите активировать каждый дочерний флажок, когда устанавливаете флажок «выбрать все».

Я думаю, вы можете просто попробовать вызвать $scope.checked внутри функции $scope.selectAll, например:

function MyCtrl($scope) {
$scope.tableRows = [{"oral": false, "cleaning": false, "filling": false, "xray": false,"crown": false, "canal": false, "dentures": false, "braces": false, "visible": false, "subtotal": 0},{"oral": false, "cleaning": false, "filling": false, "xray": false,"crown": false, "canal": false, "dentures": false, "braces": false, "visible": false, "subtotal": 0},{"oral": false, "cleaning": false, "filling": false, "xray": false,"crown": false, "canal": false, "dentures": false, "braces": false, "visible": false, "subtotal": 0},{"oral": false, "cleaning": false, "filling": false, "xray": false,"crown": false, "canal": false, "dentures": false, "braces": false, "visible": false, "subtotal": 0}];
$scope.prices = {oral: 100, cleaning: 50, filling: 75, xray: 200, crown: 125, canal: 100, dentures: 60, braces: 130}
$scope.selectAll = function(procedure, checked) {
    angular.forEach($scope.tableRows, function(person, index) {
      $scope.checked($scope.prices[procedure], index, checked, procedure);          
    });
};
$scope.checked = function(amount, position, checked, procedure) {
   $scope.tableRows[position][procedure] = checked;
   if (checked) {
      $scope.fired = 'FIRED!';
      $scope.dollarAmmount = $scope.dollarAmmount + amount;
      $scope.tableRows[position].subtotal += amount;
   } else if (!checked) {
      $scope.fired = '';
      $scope.dollarAmmount = $scope.dollarAmmount - amount;
      $scope.tableRows[position].subtotal -= amount;
   }
 }
}

Запуск в JS Bin

Я также оптимизирую некоторые строки кода. Надеюсь, это решит вашу проблему.

Ваше здоровье!

person Nguyen Tran    schedule 04.08.2016
comment
Отличная идея, я думаю, что я просто слишком долго работал, заблокировал код и не мог придумать это простое решение. Спасибо! - person qwert7465; 04.08.2016

arrow_upward
0
arrow_downward

попробуйте изменить метод selectall, как показано ниже, надеюсь, это поможет вам.

$scope.selectAll = function(procedure, checked) {

  if (checked) {
  angular.forEach($scope.tableRows, function (person) {

    person[procedure] = true;
  })
} else if (!checked) {
  angular.forEach($scope.tableRows, function (person) {
    person[procedure] = false;
  })
}
};

Найдите рабочий JS BIN здесь.

person Viplock    schedule 04.08.2016