嗨,我使用https://vitalets.github.io/checklist-model/将数据从复选框绑定到模型。当用户选择复选框时,它将成功地绑定数据。但是,我需要选项也可以“选择所有”,我遵循了文档中的说明,并尝试映射数组中的所有值,因此当用户“选择所有”所有值时,所有的值都绑定到模型中。没有发生这种情况,而是得到一个值为null的数组。以下是流程的工作原理
1)当用户加载应用程序时,调用init()函数返回数据
2)用户选择一个air_date
3)在调用ng选项getSyscodes()之后,用户获得syscode数据返回。
4)用户可以选择多个syscodes
5)用户可以“选择所有”--当我调用selectAll()时,这是我的问题所在,而不是返回数组中的每个值,数组返回为"null“,我无法调用该API。如有任何建议,我将不胜感激!这是我的HTML
每个对象的数组结构
{syscode:1233,readable_name: "MTV"}
<form>
<div class="form-group">
<pre>Selected Model: {{rc.selections.syscode}} </pre>
<label>Syscode</label>
<!-- <select class="form-control" ng-options="syscode.readable_name for syscode in rc.dropdowns.syscodes" ng-model="rc.selections.syscode" ng-disabled="rc.dropdowns.syscodes.length === 0">
</select> -->
</div>
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" style="width:214px;height:33px;font-size:15px;margin-left:-16px;"><i class="fa fa-caret-down pull-right" aria-hidden="true" style="width:1em;"></i></button>
<ul class="dropdown-menu">
<button class="btn btn-success btn-md" ng-click="rc.selectAll()"><i class="fa fa-check" aria-hidden="true"></i>Select All</button>
<button class="btn btn-danger btn-md" ng-click="rc.unselectAll()"><i class="fa fa-times" aria-hidden="true"></i>Unselect All</button>
<li ng-repeat="value in rc.dropdowns.syscodes">
<input type="checkbox" checklist-model="rc.selections.syscode" checklist-value="value.syscode" ng-checked="rc.selections.checked" /> {{value.readable_name}}</li>
</ul>
</form>和控制器
ReportsController.$inject = ['ReportService','$window', '$q'];
function ReportsController(ReportService, $window, $q){
//Sorting Values
var ctrl = this;
//Initial State Values
ctrl.results = [];
ctrl.pageDone = false;
ctrl.loading_results = false;
ctrl.search_enabled = false;
ctrl.searching = false;
//Initial data arrays
ctrl.dropdowns = {
air_dates:[],
syscodes:[],
syscodeArray:[]
};
ctrl.test = null;
//Data binding objects
ctrl.selections = {
air_date:null,
checked: null,
syscode:null,
getAll: false
};
//Get Syscodes
ctrl.selectSyscode = function(){
ctrl.search_enabled = true;
ctrl.dropdowns.syscodes = [];
ctrl.dropdowns.syscodeArray = [];
ReportService.getSyscodes(ctrl.selections).then(function(response){
ctrl.dropdowns.syscodes = response.data;
//This line below enables select all in UI
ctrl.dropdowns.syscodeArray.push(response.data);
console.log("SyscodeArray", ctrl.dropdowns.syscodeArray);
});
};
// Select All Logic
ctrl.selectAll = function(){
var newitems = [];
angular.forEach(ctrl.dropdowns.syscodes, function(syscode) {
ctrl.selections.checked = 1;
newitems.push(syscode.syscode);
});
ctrl.selections.syscode = newitems;
}
// Unselect All
ctrl.unselectAll = function(){
angular.forEach(ctrl.dropdowns.syscodeArray, function(user) {
ctrl.selections.checked = 0;
});
ctrl.selections.syscode = [];
}
//Search Logic by Syscode and Air_Date
ctrl.search = function () {
var defer = $q.defer();
if (ctrl.search_enabled) {
ctrl.searching = true;
ctrl.error = false;
ctrl.sort_by = {
col: 'market',
reverse: true
};
ctrl.filters = undefined;
ReportService.getAssets(ctrl.selections).then(function (response) {
ctrl.results = response.data;
console.log("It worked!!!",response.data);
ctrl.searched_once = true;
ctrl.searching = false;
defer.resolve('searched');
}, function (error) {
defer.reject('search-error');
ctrl.error = true;
ctrl.searching = false;
ctrl.error_data = error;
});
} else {
defer.resolve('no-search');
}
return defer.promise;
};
//Calls initial air dates
var init = function(){
ReportService.getAirDates().then(function(response){
ctrl.dropdowns.air_dates = response.data;
console.log(response.data);
ctrl.pageDone = true;
});
};
init();
}
angular.module('command-center-app').controller('ReportsController', ReportsController);发布于 2017-04-24 23:02:33
我尝试了一下,我在数组中做了一个只包含"syscode“的新数组。这个数组我给它分配了ctrl.selections.syscode,这是模型。这应该是正确的答案
ctrl.selectAll = function(){
var newitems = [];
angular.forEach(ctrl.dropdowns.syscodes, function(syscode) {
ctrl.selections.checked = 1;
newitems.push(syscode.syscode);
});
ctrl.selections.syscode = newitems;
}发布于 2017-04-24 16:53:49
我认为你的实现有问题。库使用数组来处理其中的检查值。但我不认为你会这么做。加上ng-checked应该在那里。所以:
<li ng-repeat="value in rc.dropdowns.syscodes">
<input type="checkbox" checklist-model="rc.selections.checked" checklist-value="value.syscode" />
{{value.readable_name}}
</li>在主计长中:
// Select All Logic
ctrl.selectAll = function(){
ctrl.selections.checked = [];
angular.forEach(ctrl.dropdowns.syscodeArray, function(user) {
ctrl.selections.checked.push( //iterate over all syscodes and push here
});
}
// Unselect All
ctrl.unselectAll = function(){
ctrl.selections.checked = [];
}告诉我事情进展如何。
https://stackoverflow.com/questions/43593429
复制相似问题