Angular 1.5在輸入複選框中選擇全部時，值不會綁定到模型

Question

您好我正在使用https://vitalets.github.io/checklist-model/將數據從複選框綁定到模型。當用戶選擇複選框時，它會成功綁定數據。然而，我需要選擇「全部選擇」，我按照文檔中的說明操作，並嘗試映射數組中的所有值，以便在用戶「選擇所有」時將所有值綁定到模型中。取而代之的是，我得到一個值爲null的數組。這裏是流是如何工作的，當用戶NG-選項getSyscodes()後加載應用程序

2）用戶選擇AIR_DATE

3）用戶得到syscode數據返回

1）init()函數被調用返回的數據被稱爲

4）用戶可以選擇多個syscodes

5）用戶可以「全選」，這是不是R其中，我的問題是，當我打電話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" />&nbsp;{{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); 

Answer 1

我試過這個，我打開了數組，並創建了一個只包含「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; 

} 

Answer 2

的

陣列結構有什麼不對您的實施，我認爲。該庫使用數組來處理其中的選中值。但我認爲你沒有這樣做。加ng-checked應該在那裏。所以：

<li ng-repeat="value in rc.dropdowns.syscodes"> 
     <input type="checkbox" checklist-model="rc.selections.checked" checklist-value="value.syscode" /> 
     &nbsp;{{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 = []; 
    } 

讓我知道如何去。