Question

我必须根据下拉选择值显示数据。下拉选项包括最后10名新工作人员，所有工作人员，最近三个月的工作人员和日期选定的基本工作人员详细信息。我想编写基于连接日期过滤数据的功能，并根据选定的下拉列表显示此详细信息。因为我是新人，所以我完全受到了冲击到angularjs。任何帮助将不胜感激。请指导我这个问题。

ctrl.getempjoin = function() {
  var reqObj = {
    empid: ctrl.empDetails.empid
  };
  employeeservice.getempjoinDetails(reqObj).then(function() {


      ctrl.empdetail = employeeservice.viewemployeeDetails;
      ctrl.empdetails = ctrl.empdetail.Responsefile;
      for (var i = 0; i < ctrl.empdetails.length; i++) {
        ctrl.empdetails[i].sal = ctrl.empdetails[i].sal.toString();

      }

    }
    PaginationService.initialize(ctrl.empdetails, 10);
  })




 //service file:

  var dropDownemp = [{
    optionId: '1',
    optionName: 'Last 10 new joinees join data'
  }, {
    optionId: '2',
    optionName: 'All employees join date'
  }, {
    optionId: '3',
    optionName: 'Select Date Range'
  }];

this.selectedFrequency = {
  value: ''
};

this.dropdownControl = componentFactory.create({
  type: 'dropdown',
  customValidation: function() {},
  dropdownOptions: dropDownemp,
  empty: {
    value: 'Select One Value'
  },

  value: {
    optionId: '1',
    optionName: 'Last 10 joinee detilas'
  },
  desktop: false,
  onSelect: function() {
    var selectVal = this.getValue().optionId;
    var selectName = this.getValue().optionName;
    that.dateControlFrom.value = '';
    that.dateControlTo.value = '';
    displayDetails(selectVal, selectName);
  }
});



function displayDetails(selectVal, selectName) {

  if (selectVal == "1") {
    that.requestObject = {
      empid: emploeeDetails.empid,
      fromDate: that.finalCurrentMonth,
      toDate: that.dateStartFormat
    }
    that.getEmployeeDetails(that.requestObject, ConfigService.ServiceUrl.getNewEmployeeDetails).then(onSuccess).catch(onError);
  } else if (selectVal == "2") {
    that.requestObject = {
      empid: emploeeDetails.empid,
      fromDate: that.finalFirstDate,
      toDate: that.finalLastDate
    }
    that.getEmployeeDetails(that.requestObject, ConfigService.ServiceUrl.getFlexiSummaryDetails).then(onSuccess).catch(onError);
  } else if (selectVal == "3") {
    openDateRange();
  }

<div ngcontroller="mycontroller as myctrl" ng-repeat="employee in myctrl.empdetails.employees">
  <div>
    name
  </div>

  <div>
    {{employee.name}}
  </div>

  <div>
    city
  </div>

  <div>
    {{employee.city}}
  </div>

  <div>
    joindate
  </div>

  <div>
    {{employee.joindate}}
  </div>


  <div>
    salary
  </div>

  <div>
    {{employee.salary}}
  </div>

json文件：

Employees:
{
[
joindate : "23-nov-2016",
name : "abc",
city:"a",
salary:10000
],
}

Answer 1

好的，您将要使用过滤器和ng-repeat在视图中进行实际过滤。你基本上有两个问题：

将输入JSON中的joindate属性转换为可与其他日期进行比较的内容。我会将其解析为Javascript Date对象。由于您的日期格式显示为dd-MMM-yyyy，因此此另一个StackOverflow问题（Parse String dd-MMM-yyyy to Date Object JavaScript without Libraries）上有一个可以帮助您的代码段。
构建一个自定义AngularJS过滤器，根据下拉列表中当前选定的过滤选项执行您想要的操作。这看起来像下面定义的过滤器：

app.filter('myDateFilter', function() {
  // Helper from https://stackoverflow.com/questions/22058822/parse-string-dd-mmm-yyyy-to-date-object-javascript-without-libraries
  var parseDate = function(s) {
    var months = {jan:0,feb:1,mar:2,apr:3,may:4,jun:5,
                  jul:6,aug:7,sep:8,oct:9,nov:10,dec:11};
    var p = s.split('-');
    return new Date(p[2], months[p[1].toLowerCase()], p[0]);
  }

  // Actual filter function
  // input is the original array of joinees
  // dateFilterType is the currently selected date filter from the dropdown
  // sd is the start date selected in the datepicker
  // ed is the end date selected in the datepicker
  return function(input, dateFilterType, sd, ed) {
    switch (dateFilterType) {
      case 1:
        // Create a date that is exactly 10 days ago
        var tendaysago = new Date();
        tendaysago.setDate(tendaysago.getDate() - 10);
        // Filter if joindate > tendaysago
        return input.filter(function(item) {
          return parseDate(item.joindate) > tendaysago;
        });
        return input;
        break;
      case 2:
        // Create a date that is exactly 3 months ago
        var threemonthsago = new Date();
        threemonthsago.setMonth(threemonthsago.getMonth() - 3);
        // Filter if joindate > threemonthsago
        return input.filter(function(item) {
          return parseDate(item.joindate) > threemonthsago;
        });
        break;
      case 3:
        // Using uib-datepicker, sd and ed inputs are already JS Date objects so we can just directly compare the item's parsed date with these inputs
        return input.filter(function(item) {
          var d = parseDate(item.joindate);
          return d > sd && d < ed;
        });
        break;
      default:
        return input;
    }
  }
});

然后，您可以在模板中使用此过滤器，如下所示：

<div ng-repeat="joinee in joinees | myDateFilter:selectedDateFilter:sdt:edt">

myDateFilter是已定义过滤器的名称，通过用:分隔参数来传入参数。

这是一个可以帮助您的简单的plunkr：https://plnkr.co/edit/wfBUSaXOQ89DxdiMQkmm

如何通过在angularjs中动态过滤日期来获取数组数据？

1 个答案: