1

O bug é o seguinte, tenho 2 checkboxes, acionando o primeiro o outro é marcado automaticamente, o segundo checkbox possui a tag ng-change que chama uma função no controller, o problema é, quando aciono o segundo checkbox de primeira, a ng-change funciona e faz a call correta da função, se eu aciono o primeiro checkbox marcando automaticamente o segundo, quando desmarco o segundo, ele já não faz a chamada da função, ele buga o primeiro click no segundo checkbox,

consegui reproduzir o erro

angular.module('ToDo', [])
.controller('ToDoController', function ($scope) {
    $scope.change = function(){
      console.log("changed");
    };
});
<html ng-app='ToDo'>
  <head>
    <title>My Angular To-Do App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>
  <body ng-controller="ToDoController">
    <input type="checkbox" ng-model="ck1" />
    <br/>
    <input type="checkbox" ng-model="ck2" ng-change="change()" ng-checked="ck1"/>
  </body>
</html>

1
  • Existem várias formas de resolver esse problema. Você realmente precisa que o model do primeiro checkbox tenha um nome diferente do segundo? Qual é a necessidade do change. Será que não seria melhor usar um $scope.$watch ao invés de uma função que é capturada pelo ng-change? Commented 25/10/2017 às 12:40

1 Resposta 1

1

Eu acho que no seu caso seria melhor usar o $watch do que o ng-change para "acompanhar" as mudanças na variável.

Não sei qual é a necessidade de você usar duas variaveis com nomes diferentes, mas fiz uma solução baseada no código oferecido na pergunta.

Veja:

angular.module('ToDo', [])
.controller('ToDoController', function ($scope) {
    $scope.$watch('ck2', function(valor){
      if (valor == true) {
          console.log("changed");
      }
    });
});
<html ng-app='ToDo'>
  <head>
    <title>My Angular To-Do App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>
  <body ng-controller="ToDoController">
    <input type="checkbox" ng-model="ck1" ng-change="ck2=ck1" />
    <br/>
    <input type="checkbox" ng-model="ck2" ng-checked="ck1"/>
  </body>
</html>

Usei o ng-change no primeiro checkbox para, quando o mesmo for alterado, alterar o valor da variável ck2.

Veja a documentação do $scope.$watch

1
  • Tem como usar o watch em vários inputs, pela class do CSS, por exemplo, é que na vdd vou fazer uma consulta, e para cada linha retornada vou criar 2 inputs, usando a mesma ideia, cada input checkado vai automaticamente checar o outro correspondente
    – HUGO PABLO
    Commented 25/10/2017 às 14:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .