List of dynamic checkboxes in Angular and JSON API

Question

List of dynamic checkboxes in Angular and JSON API

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

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

There are 2 ng-repeats:

Bringing the list of categories in the data base, and;

ng-model with the list of categories chosen.

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 JSON / API response (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 output (2)

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

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

Does anyone have an idea?

angularjs json

asked by anonymous 26.06.2015 / 22:08

2 answers

How to modify or set a value inside the class in php Accessing .txt file data by Ajax

score 2 · Answer 1

I made a Plunker to illustrate the example.

link

I suggest you have only 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 checked.

<!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>varapp=angular.module('app',[]);app.controller('checkController',function($scope){//SupomosqueestearrayéarespostadoJSONdawebservice$scope.categorias={Esportes:1,Entreterimento:0};});</script></head><bodyng-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>

score 1 · Answer 2

One way without changing the response of the {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><scriptsrc="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>