Dynamic checkbox list in Angular and JSON API

Asked

Viewed 2,217 times

2

I’m having trouble rendering dynamic checkboxes with JSON API response.

Are 2 ng-repeats :

  1. Bringing the list of existing categories into the dataset, and;
  2. ng-model with the list of chosen categories.

Below my HTML code;

<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>

Below my answer 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"}
]

Another JSON exit (2)

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

I would like the checkboxes to be checked with the above answer.

Anyone have any idea?

json angularjs

2 answers

2

I made a Plunker to illustrate the example.

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

I suggest you only have one list, the same array that returns from the back end you use to list and select, so if the category is saved in the database as chosen the checkbox will already be marked.

<!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>

1

A way without changing the server response {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>

Browser other questions tagged json angularjs

You are not signed in. Login or sign up in order to post.