复选框值作为angularjs中的数组答案

【问题标题】：check box values as array in angularjs复选框值作为angularjs中的数组
【发布时间】：2017-07-01 19:50:10
【问题描述】：

我有一份学生登记表。把有蓝色、绿色、红色三个复选框的喜欢的颜色命名为1个字段。用户可以选中多个复选框。

现在我要求当用户选中复选框时，应使用 ng-model 将其值添加到数组列表中。

谁能帮帮我？

 <div class="form-group">
    <span class="col-md-1 col-md-offset-2 text-center">
        <i class="fa fa-bullseye bigicon"></i>
    </span>

    <div class="col-md-8">
        <label>Favorite Colors</label>

        <div class="form-group">
             <label class="checkbox-inline"> 
                <input type="checkbox" name="favoriteColors" ng-model="formData.favoritecolor." value="Red"> Red 
             </label> 

             <label class="checkbox-inline"> 
                <input type="checkbox" name="favoriteColors" ng-model="formData.favoritecolor.checked"> Blue
             </label> 

             <label class="checkbox-inline"> 
                <input type="checkbox" name="favoriteColors" ng-model="formData.favoritecolor.checked"> Green
            </label>
        </div>
    </div>
</div>

上面是我的代码：我希望价值为{favouritecolor:[red,blue,green]}

【问题讨论】：

标签： html angularjs

【解决方案1】：

这样试试

<input type="checkbox" name="favoriteColors"  
       ng-click="addToList('Red')" value="Red">

在控制器中：

$scope.addToList = function(color){
  var index = $scope.data.favouritecolor.indexOf(color);
  if(index > -1)
    $scope.data.favouritecolor.splice(index,1);
  else 
    $scope.data.favouritecolor.splice(color,index,0);    
}

【讨论】：

【解决方案2】：

您可以在单击复选框时调用函数并获取值。

JS：

function MyCtrl($scope) {
   $scope.colorArray=[];
   $scope.getChecked=function(color){
    var index=$scope.colorArray.indexOf(color);
    if(index>-1)
     $scope.colorArray.splice(index,1);
     else  
      $scope.colorArray.push(color);
     $scope.temp={"favouritecolor":$scope.colorArray};
     console.log($scope.temp);

   }
}

HTML：

 <div ng-controller="MyCtrl">
    <div class="form-group">
        <span class="col-md-1 col-md-offset-2 text-center"><i
                                        class="fa fa-bullseye bigicon"></i></span>
        <div class="col-md-8">
            <label>Favorite Colors</label>
            <div class="form-group">
                <label class="checkbox-inline">
                    <input type="checkbox" name="favoriteColors" ng-checked="colorArray.indexOf(color)>-1" value="Red" ng-click="getChecked('Red')"> Red
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="favoriteColors" ng-checked="colorArray.indexOf(color)>-1" ng-click="getChecked('Blue')"> Blue
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="favoriteColors" ng-checked="colorArray.indexOf(color)>-1" ng-click="getChecked('Green')"> Green
                </label>
            </div>

        </div>
    </div>
</div>

JS 小提琴:http://jsfiddle.net/u2c9uLmv/1/

【讨论】：

【解决方案3】：

这是ng-model 通常使用的一种方法，将数组转换为对象，然后添加额外的键selected，该键又用作布尔值，您可以过滤掉数据。

angular.module('app', []).controller('formController', FormController);

function FormController($scope, $filter) {
  $scope.list = ['blue', 'red', 'yellow'];
  $scope.colors = [];
  angular.forEach($scope.list, function(data) {
    $scope.colors.push({
      color: data,
      selected: false
    });
  });
  $scope.showSelected = function() {
    var selectedColors = $filter('filter')($scope.colors, {
      selected: true
    }, true);

    var favouriteColors = [];
    angular.forEach(selectedColors, function(data) {
      favouriteColors.push(data.color);
    });

    console.log(favouriteColors);
  };
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div class="container" data-ng-controller="formController">
    <div class="row">
      <div class="col-sm-12">
        <form class="form-horizontal" ng-submit="showSelected()">
          <div class="checkbox" data-ng-repeat="data in colors">
            <label>
    <input type="checkbox" data-ng-value="data.color" data-ng-model="data.selected" />{{data.color}}
  </label>
          </div>
          <div class="form-group">
            <button class="btn btn-sm btn-primary" type="submit">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>

【讨论】：