Все флажки проверяются, когда один из них отмечен (должен быть только тот, который отмечен) - входные данные, сгенерированные с помощью angular js

Я делаю приложение с angular js. Это происходит так.

  • Пользователь создает группы и добавляет имена групп

  • Пользователь создает «веб-сайты», и для каждого веб-сайта он может проверить группы, созданные на предыдущем шаге.

Проблема в том, что флажки всех групп проверяются, когда он проверяет только один.

Вот код, который генерирует флажки:

<p>Groups: 
<label ng-repeat='group in groups'>
    <input type="checkbox" ng-model="newSite.groups" name="group-check" value="{{group.id}}"/> 
    {{group.name}}</label></p>

Вот код, который выводится:

<label ng-repeat="group in groups" class="ng-scope ng-binding">
    <input type="checkbox" ng-model="newSite.groups" name="group-check" value="0" class="ng-valid ng-dirty"> 
    first group</label>
<label ng-repeat="group in groups" class="ng-scope ng-binding">
    <input type="checkbox" ng-model="newSite.groups" name="group-check" value="1" class="ng-pristine ng-valid"> 
    second group</label>

Спасибо!

редактировать: вот ссылка на плункер http://beta.plnkr.co/edit/OVBoTDY2YmXgSy8TAbIW


angularjs angularjs-ng-repeat
person Bojana Šekeljić    schedule 05.07.2013    source источник
comment
Вы привязываете чекбокс к той же модели. Попробуйте создать плункер с минимальным кодом, чтобы показать проблему   -  person Liviu T.    schedule 05.07.2013
comment
@ЛивиуТ. Да, только что понял, что это проблема. Итак, я думаю, мне следует удалить ng-модель и обновить newSite.groups, используя проверенное/непроверенное значение?   -  person Bojana Šekeljić    schedule 05.07.2013
comment
лучше бы вы настроили плункер, чтобы проблема могла быть решена   -  person Ajay Beniwal    schedule 05.07.2013
comment
@Ajaybeniwal добавил ссылку на плункер. Спасибо!   -  person Bojana Šekeljić    schedule 05.07.2013

Ответы (1)


arrow_upward
5
arrow_downward

Это (плункер) я бы сделал так. Идея состоит в том, чтобы создать модель для отслеживания проверенных групп.

JS

app.controller("WebsitesCtrl", function($scope) {
  $scope.newSite = {};
  $scope.newGroup = {};
  $scope.checkedGroupIds = {};

  $scope.sites = [];
  var groupMap = {};
  $scope.groups = [];

  var siteIdSeq = 0;
  function createSite(newSite, groups) {
    $scope.sites.push(newSite);
    newSite.id = siteIdSeq;
    newSite.groups = groups;
    siteIdSeq++;
    return newSite;
  }

  var groupIdSeq = 0;
  function createGroup(newGroup) {
    $scope.groups.push(newGroup);
    newGroup.id = groupIdSeq;
    groupMap[newGroup.id] = newGroup;
    groupIdSeq++;
    return newGroup;
  }

  $scope.submitSite = function() { 
    var groups = [];
    angular.forEach($scope.checkedGroupIds, function(checked, id) {
      if(checked) {
        groups.push(groupMap[id]);
      }
    });

    createSite($scope.newSite, groups);
    $scope.newSite = {};
    $scope.checkedGroupIds = {};
  };

  $scope.submitGroup = function() {
    createGroup($scope.newGroup);
    $scope.newGroup = {};
  };

  //test data
  $scope.newSite.url = 'http://www.my-site.com';
  var all = createGroup({name:'All'});
  var home = createGroup({name:'Home'});
  var fav = createGroup({name:'Fav'});

  createSite({url:'http://www.stackoverflow.com'}, [all, fav]);
  createSite({url:'http://www.google.com'}, [fav]);
  createSite({url:'http://www.plnkr.co'}, [home]);
});

HTML

<div id="website-form">
  Sites:
  <ul>
    <li ng-repeat="site in sites">{{site}}</li>
  </ul>

  <form ng-submit="submitSite()">
    <label>Site url: <input type="url" ng-model="newSite.url" /></label>
    <p>Groups: 
      <label ng-repeat='group in groups'>
        <input type="checkbox"  name="group-check" value="{{group.name}}" id="{{group.id}}" 
          ng-model="checkedGroupIds[group.id]" /> 
      {{group.name}}
      </label>
    </p>
    <input type="submit" id="submitWebsite" value="Save Changes" ng-disabled="!newSite.url" />
  </form><!-- end submitSite() -->
</div>

<div id="group-form">
  <form ng-submit="submitGroup()">
    <label>Name of the group: <input ng-model="newGroup.name" /></label>
    <input type="submit" class="btn btn-primary" id="submitGroup" value="Save Changes"
      ng-disabled="!newGroup.name"/>
    </form><!-- end submitGroup() -->
</div>
person Liviu T.    schedule 05.07.2013
comment
Спасибо большое! Я немного изменю его, но это, по сути, то, что мне нужно! - person Bojana Šekeljić; 07.07.2013