Список динамических флажков в Angular и JSON API

0

У меня возникли проблемы с отображением динамических флажков с ответом API JSON.

Это 2 нг-повторяет:

  1. Приведение списка категорий в BD и;
  2. ng-модель с выбранным списком категорий.

Ниже моего 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>

Ответ 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"}
]

Ответ JSON (2)

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

Я бы хотел, чтобы флажок оставался включенным с ответом.

Кто-нибудь есть идеи?

Теги:

1 ответ

1
Лучший ответ

Здесь у вас есть рабочая скрипка, проверьте ее

jsfiddle.net/b895j3ay

var app = angular.module("Application", [])
app.controller('Ctrl', function($scope) {
  $scope.roles = [{
    id: 1,
    text: 'guest'
  }, {
    id: 2,
    text: 'user'
  }, {
    id: 3,
    text: 'customer'
  }, {
    id: 4,
    text: 'admin'
  }];
  $scope.isChecked = function(id, matches) {
    var isChecked = false;
    angular.forEach(matches, function(match) {
      if (match === id) {
        isChecked = true;
      }
    });
    return isChecked;
  }
  $scope.user = {
    roles: [2, 4, 3]
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div ng-app="Application">
  <div ng-controller="Ctrl">
    <label ng-repeat="role in roles">
      <input type="checkbox" ng-model="user.roles" checklist-value="role.id" ng-checked="isChecked(role.id,user.roles)">{{role.text}}
    </label>
  </div>
</div>
</div>
  • 0
    Спасибо, работал над загрузкой страницы, но я забыл, что мне нужно добавить ng-модель для отправки API, и если я нажимаю флажки, все проверяются.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню