將選中的複選框的值存儲在使用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的變量中

回答

相關問題