首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >角1.5当选中“全部输入”复选框时,值将不会绑定到模型

角1.5当选中“全部输入”复选框时,值将不会绑定到模型
EN

Stack Overflow用户
提问于 2017-04-24 16:33:18
回答 2查看 69关注 0票数 2

嗨,我使用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"}

代码语言:javascript
复制
<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>

和控制器

代码语言:javascript
复制
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);
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-04-24 23:02:33

我尝试了一下,我在数组中做了一个只包含"syscode“的新数组。这个数组我给它分配了ctrl.selections.syscode,这是模型。这应该是正确的答案

代码语言:javascript
复制
ctrl.selectAll = function(){
var newitems = [];
angular.forEach(ctrl.dropdowns.syscodes, function(syscode) {
  ctrl.selections.checked = 1;
  newitems.push(syscode.syscode);
});

ctrl.selections.syscode = newitems;

}
票数 0
EN

Stack Overflow用户

发布于 2017-04-24 16:53:49

我认为你的实现有问题。库使用数组来处理其中的检查值。但我不认为你会这么做。加上ng-checked应该在那里。所以:

代码语言:javascript
复制
<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>

在主计长中:

代码语言:javascript
复制
  // 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 = [];
  }

告诉我事情进展如何。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43593429

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档