选中一个复选框时，所有复选框都会被选中(应该只是选中的那个) - 用 angular js 生成的输入 [英] All checkboxes get checked when one is checked (should be just the one checked) - inputs generated with angular js

问题描述

我正在使用 angular js 制作应用程序.事情是这样的.

• 用户创建群组并添加群组名称

• 用户创建网站"，对于每个网站，他可以检查在上一步中创建的组

问题是当他只选中一个时，所有组的复选框都会被选中.

这是生成复选框的代码:

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

这是输出的代码:

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

谢谢！

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

解决方案

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

JS

app.controller("WebsitesCtrl", function($scope) {$scope.newSite = {};$scope.newGroup = {};$scope.checkedGroupIds = {};$scope.sites = [];var groupMap = {};$scope.groups = [];var siteIdSeq = 0;函数 createSite(newSite, groups) {$scope.sites.push(newSite);newSite.id = siteIdSeq;newSite.groups = 组；siteIdSeq++;返回新站点；}var groupIdSeq = 0;功能创建组(新组){$scope.groups.push(newGroup);newGroup.id = groupIdSeq;groupMap[newGroup.id] = newGroup;groupIdSeq++;返回新组；}$scope.submitSite = function() {var 组 = [];angular.forEach($scope.checkedGroupIds, function(checked, id) {如果(检查){groups.push(groupMap[id]);}});创建站点($scope.newSite，组)；$scope.newSite = {};$scope.checkedGroupIds = {};};$scope.submitGroup = function() {创建组($scope.newGroup)；$scope.newGroup = {};};//测试数据$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

网站:<ul><li ng-repeat="site in sites">{{site}}</li><form ng-submit="submitSite()"><label>站点网址:<input type="url" ng-model="newSite.url"/></label><p>组:<label ng-repeat='group in groups'><input type="checkbox" name="group-check" value="{{group.name}}" id="{{group.id}}"ng-model="checkedGroupIds[group.id]"/>{{团队名字}}</p><input type="submit" id="submitWebsite" value="Save Changes" ng-disabled="!newSite.url"/></form><!-- end submitSite() -->
<div id="group-form"><form ng-submit="submitGroup()"><label>组名:<input ng-model="newGroup.name"/></label><input type="submit" class="btn btn-primary" id="submitGroup" value="保存更改"ng-disabled="!newGroup.name"/></form><!-- end submitGroup() -->

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

• User creates groups and adds group names

• User creates 'websites' and for each website he can check groups that are created in previous step

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

解决方案

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>

这篇关于选中一个复选框时，所有复选框都会被选中(应该只是选中的那个) - 用 angular js 生成的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！