将选中的复选框的值存储在使用Angular JS的变量中

我使用ng-repeat使用下面的天对象值创建了一组复选框。将选中的复选框的值存储在使用Angular JS的变量中

$scope.config = { days: [ 
      {name:'Monday'}, 
      {name:'Tuesday'}, 
      {name:'Wednesday'}, 
      {name:'Thursday'}, 
      {name:'Friday'}, 
      {name:'Saturday'}, 
      {name:'Sunday'}, 
     ]} 
});

我的复选框使用ng-repeat就是这样。

<ul class="list-inline"> 
<li ng-repeat="day in config.days"> 
    <div class="checkbox"> 
     <label class="xsm-label"> 
      <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" />&nbsp;{{day.name}} 
     </label> 
    </div> 
</li> 
</ul>

我试过很多，但没有运气，请帮助我如何选中的复选框值的值存储在一个变量。

谢谢。

来源

2017-05-26 Ajeet

什么工作？它显示什么？也许是因为“.selected”属性在你的日子里不存在...... – Julo0sS

您可以使用ng-change，无论何时选中复选框，都使用新值更新变量。

下面的代码行将保留最后选中的复选框，如有必要，您可以用空字符串替换它。

$scope.selectedDay= day.selected ? day.name : $scope.selectedDay;

var app = angular.module("MyApp", []).controller("MyCtrl", function($scope) { 
 

 
    $scope.config = { days: [ 
 
      {name:'Monday'}, 
 
      {name:'Tuesday'}, 
 
      {name:'Wednesday'}, 
 
      {name:'Thursday'}, 
 
      {name:'Friday'}, 
 
      {name:'Saturday'}, 
 
      {name:'Sunday'}, 
 
     ]}; 
 
     
 
     
 
    $scope.storeValue = function(day) { 
 
    $scope.selectedDay= day.selected ? day.name : $scope.selectedDay; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="MyApp" ng-controller="MyCtrl"> 
 
<ul class="list-inline"> 
 
<li ng-repeat="day in config.days"> 
 
    <div class="checkbox"> 
 
     <label class="xsm-label"> 
 
      <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" ng-change="storeValue(day)" />&nbsp;{{day.name}} 
 
     </label> 
 
    </div> 
 
</li> 
 
</ul> 
 

 
{{selectedDay}} 
 
</body>

来源

2017-05-26 05:33:15 Sajal

这是确定的。您可以通过config.days阵列上的循环获取选定值，并获取selected为true的项目。

var app = angular.module('app', []); 
 

 
app.controller('main', ['$scope', function($scope){ 
 
    $scope.config = { days: [ 
 
      {name:'Monday'}, 
 
      {name:'Tuesday'}, 
 
      {name:'Wednesday'}, 
 
      {name:'Thursday'}, 
 
      {name:'Friday'}, 
 
      {name:'Saturday'}, 
 
      {name:'Sunday'}, 
 
     ]}; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
    <div ng-app="app" ng-controller="main"> 
 
<ul class="list-inline"> 
 
<li ng-repeat="day in config.days"> 
 
    <div class="checkbox"> 
 
     <label class="xsm-label"> 
 
      <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" />&nbsp;{{day.name}} 
 
     </label> 
 
    </div> 
 
</li> 
 
</ul> 
 
<pre>{{config.days | json}}</pre> 
 

 
</div>

来源

2017-05-26 05:38:25

您可能需要使用ng-change指令执行上的复选框的变化的方法，在函数里，你可以存储选定值

$scope.selected = function(day, index) { 
    day.selected ? $scope._selected.push(day.name) : $scope._selected.splice(index, 1) 
}

你的HTML应该看看如下所示：

<li ng-repeat="day in config.days"> 
    <div class="checkbox"> 
     <label class="xsm-label"> 
      <input type="checkbox" ng-model="day.selected" value="{{day.name}}" id="cs_select_{{day.name}}" 
      name="selected_days" ng-change="selected(day, $index)"/>&nbsp;{{day.name}} 
              ^^^^^^^^^This ^^^^^^^^^ 
     </label> 
    </div> 
</li>

Working Plunkr

来源

2017-05-26 05:40:13

包括在你输入指令ng-change="onChange(day)"：

<input type="checkbox" ng-model="day.selected" id="cs_select_{{day.name}}" name="selected_days" 
      ng-change="onChange(day)"/>&nbsp;{{day.name}}

然后，在你的控制器，定义一个函数为：

 $scope.onChange = function(day) { 

      $scope.lastSelectedDayValue = day.selected ? day.name : ''; 

      $scope.allSelectedDays = $scope.config.days.filter(function(day){ 
                 return day.selected 
                }).map(function(day){ 
                 return day.name 
                }); 
     }

您将在$scope.lastSelectedDayValue拥有的最后一天，你点击，并在$scope.allSelectedDays这个数组中包含当前所选的所有日子。

来源

2017-05-26 05:59:17

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.config = { days: [ 
 
      {name:'Monday'}, 
 
      {name:'Tuesday'}, 
 
      {name:'Wednesday'}, 
 
      {name:'Thursday'}, 
 
      {name:'Friday'}, 
 
      {name:'Saturday'}, 
 
      {name:'Sunday'}, 
 
     ]}; 
 
     
 
    var arr = [];  
 
    $scope.getSelected = function(selectedDay) { 
 
     if(arr.indexOf(selectedDay) == -1) { 
 
     arr.push(selectedDay); 
 
     } 
 
     console.log(arr); 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <ul class="list-inline"> 
 
<li ng-repeat="day in config.days"> 
 
    <div class="checkbox"> 
 
     <label class="xsm-label"> 
 
      <input type="checkbox" ng-model="selectedDay" value="{{day.name}}" id="cs_select_{{day.name}}" name="selected_days" ng-change="getSelected(day.name)"/>&nbsp;{{day.name}} 
 
     </label> 
 
    </div> 
 
</li> 
 
</ul> 
 
</div>

来源

2017-05-26 08:50:48

将选中的复选框的值存储在使用Angular JS的变量中

回答

相关问题