anglejsの配列としてのチェックボックスの値

私は学生登録用紙を持っています。 3つのチェックボックスが青、緑、赤のチェックボックスを持つお気に入りの名前のフィールドを1つ置きます。ユーザーは複数のチェックボックスをオンにすることができます。anglejsの配列としてのチェックボックスの値

今私は、ユーザーのチェックボックスの値が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]}

出典

2017-07-01 Unnati

としての価値を求めています。

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/

出典

2017-07-01 09:04:00 Vivz

この

のように試してみてください

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

出典

2017-07-01 09:08:09

これは一つの方法は、通常、オブジェクトへの配列を回すと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>

出典

2017-07-01 09:26:39 Priya

anglejsの配列としてのチェックボックスの値

答えて

関連する問題