Angularjs 多选日期选择器数组

Question

我创建了一个简单的 multi-select 而没有扩展 ui-bootstrap，方法是在 tr 元素中结合使用 ng-change 和 ng-repeat。我能够 select 多个日期并将所有日期推送到 table 数组中。但是删除项目的 splice() 和清空数组的 pop() 根本不起作用。

这里是 link 通过扩展 bootstrap plnkr.co/iVSdXt

来支持 multiselect

我的控制器：

angular.module('app', ['gm.datepickerMultiSelect'])
.controller('AppCtrl', function() {
  this.activeDate;
  this.selectedDates = [new Date().setHours(0, 0, 0, 0)];
  this.type = 'individual';

  this.identity = angular.identity;

  this.removeFromSelected = function(dt) {
    this.selectedDates.splice(this.selectedDates.indexOf(dt), 1);
  }
});

Answer 1

检查工作演示：Plunker

首先，ng-change requires ng-model：

Note, this directive requires ngModel to be present.

所以你的错误来了：

Controller 'ngModel', required by directive 'ngChange', can't be found!

添加一个ng-model赞：

<tr ng-repeat="d in frompickers" ng-model="selectedDate" 
    ng-change="fromdatepickers(calDate)">

其次，将您的控制器修改为：

angular.module('app', [])
  .controller('AppCtrl', function($scope) {
    $scope.frompickers = [];
    $scope.remove = function(index) {
      $scope.frompickers.splice(index, 1);
    }
    $scope.reset = function() {
      while ($scope.frompickers.length > 0) {
        $scope.frompickers.pop();
      }
    };
    $scope.fromdatepickers = function(calDate) {
      var cdate = new Date(calDate);
      $scope.frompickers.push(cdate);
    };
  });

在您的代码中，您在函数 $scope.fromdatepickers 中定义了 $scope.frompickers = [];，它每次都会创建一个新数组。所以数组总是只有一个成员。

Angularjs 多选日期选择器数组

Angularjs Multiselect datepicker array

arrays

datepicker

multi-select

angularjs