angularjs - 当一个复选框被选中时，所有复选框都会被选中(应该只是被选中的那个)——使用 angular js 生成的输入

Question

我正在使用 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>

谢谢!

编辑:这里是 plunker 链接 http://beta.plnkr.co/edit/OVBoTDY2YmXgSy8TAbIW

Answer 1

This (plunker)我会怎么做。这个想法是创建一个模型来跟踪检查组。

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>