CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Bojana Šekeljić
Bojana Šekeljić

Reputation: 1056

All checkboxes get checked when one is checked (should be just the one checked) - inputs generated with angular js

I am making app with angular js. It goes like this.

Problem is that all groups checkboxes get checked when he checks just one.

Here is the code that generates the checkboxes:

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

Here is the code that is outputed:

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

Thanks!

edit: here is the plunker link http://beta.plnkr.co/edit/OVBoTDY2YmXgSy8TAbIW

Upvotes: 3

Views: 8585

Answers (1)

Liviu T.
Liviu T.

Reputation: 23664

This (plunker) is how I would do it. The idea is to create a model to keep track of checked groups.

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>

Upvotes: 5

Related Questions