Question

我有一份学生注册表。我把一个名为喜欢的颜色的字段放在三个复选框蓝色，绿色，红色。用户可以选中多个复选框。

现在我要求当用户选中复选框时，应使用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]}

Answer 1

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

<强> 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 Fiddle ：http://jsfiddle.net/u2c9uLmv/1/

Answer 2

试试这个

<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);    
}

Answer 3

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

＆＃13;

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);
  };
}

＆＃13;

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

＆＃13;

复选框值为angularjs中的数组

3 个答案: