2

Estou com problemas em renderizar checkboxes dinâmicos com resposta de JSON API.

São 2 ng-repeats :

  1. Trazendo a listagem de categorias existentes no bando de dados, e;
  2. ng-model com a listagem de categorias escolhidas.

Abaixo meu código HTML;

<ul class="list-group">
    <li class="list-group-item" ng-repeat="cats in categorias">
        <div class="checkbox"><label><input type="checkbox" ng-model="checkbox[item.cats]"><span class="checkbox-material"><span class="check"></span></span></label> {{cats.name}}</div>
    </li>
</ul>

Abaixo minha resposta JSON/API (1)

[
  {"id":"1","id_module":"1","name":"Esportes"},
  {"id":"2","id_module":"1","name":"Entretenimento"},
  {"id":"3","id_module":"1","name":"Terror"},
  {"id":"4","id_module":"1","name":"Drama"}
]

Outra saida JSON (2)

{cats":["1","2"]}

Gostaria que os checkbox ficassem checados com a resposta acima.

Alguém tem idéia?

2 Respostas 2

3

Fiz um Plunker para ilustrar o exemplo.

http://embed.plnkr.co/snSiKis4r1u9GJKzDA3f/preview

Eu Sugiro que tenha apenas uma lista, o mesmo array que retorna do back-end você usa para listar e selecionar, assim se a categoria estiver salva no banco como escolhida o checkbox já estará marcado.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
  <script> 
     var app = angular.module('app', []);
     app.controller('checkController', function($scope){

        // Supomos que este array é a resposta do JSON da webservice
        $scope.categorias = {
          Esportes:1,
          Entreterimento:0
        };
     });
  </script>
  </head>

<body ng-app="app">
<h1>checkbox true!</h1>
<div ng-controller="checkController">
  <table>
    <thead>
      <tr>
        <td>Categorias</td>
        <td>Selecione</td>
      </tr>
    </thead>
    <tbody>
      <!-- loop para lista de categorias --> 
      <tr ng-repeat="(key, value) in categorias">
        <td>{{key}}</td>
        <td>
          <input type="checkbox"  ng-model="categorias[key]" 
            name="{{key}}" ng-checked="value"/>
        </td>
      </tr>
    </tbody>
  </table>
  {{categorias}}


</div>

</body>

</html>
0
1

Uma maneira sem mudar a resposta dos servidor {cats: ["1", "2"]}

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.categorias = [
    { "id": "1", "id_module": "1", "name": "Esportes" },
    { "id": "2", "id_module": "1", "name": "Entretenimento" },
    { "id": "3", "id_module": "1", "name": "Terror"},
    {"id": "4", "id_module": "1", "name": "Drama" }
  ]
  
  $scope.selecionados = { "cats": ["1", "2"] };

  $scope.seleciona = function(item) {
    var arraySelecionados = $scope.selecionados.cats;
    return (arraySelecionados.indexOf(item.id) > -1);
  }
  
  $scope.marca = function(item) {
    var arraySelecionados = $scope.selecionados.cats;
    var index = arraySelecionados.indexOf(item.id);
    if (index > -1) {
      arraySelecionados.splice(index, 1);
    } else {
      $scope.selecionados.cats.push(item.id);
    }
  }
});
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="item in categorias">
      <label>
        <input type="checkbox" ng-model="dadsa" ng-change="marca(item)" ng-checked="seleciona(item)">
      </label>{{item.name}} {{confirmed}}</div>
    </li>
  </ul>{{selecionados}}


</body>

</html>

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 .