2016-08-04 1 views
1

Итак, у меня возникла проблема, которую я потратил некоторое время на исследования и безрезультатно, не нашел рабочего решения.AngularJS - Trigger ng-change, основанный на значении ng-модели

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

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

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

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

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

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

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

+2

Покажите нам код. – developer033

+0

Пояснения классные и все, но на самом деле не могут показать нам, если вы допустили небольшую ошибку или нет. Пожалуйста, покажите код, а также объяснение. –

+0

Обновлено с помощью js bin link – qwert7465

ответ

0

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

Я думаю, вы можете просто попробовать позвонить $ 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; 
    } 
} 
} 

Run на JS Bin

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

Cheers!

+0

Отличная идея, я думаю, что я просто работал слишком долго, получил код и не мог думать об этом простом решении. Благодаря! – qwert7465

0

попробуйте изменить 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 Здесь

 Смежные вопросы

  • Нет связанных вопросов^_^