将过滤器值设置为 select 框中的选项

Question

在 Angularjs 应用程序中，我使用 ng-options 显示用户和 valid from 日期。

这里我有一个复选框，默认情况下将被选中，这意味着只需要显示有效汇率..

这里的有效费率是指每个用户最近日期的费率..

如果showvalidrates = false预期结果如下,

ASSIST.. / Assistance [valid from 2017-05-01]
ASSIST.. / Assistance [valid from 2018-01-01]
ASSIST.. / Assistance [valid from 2019-01-01]
PROF.. / Professional [valid from 2017-05-01]
PROF.. / Professional [valid from 2018-01-01]
PROF.. / Professional [valid from 2019-01-01]
SEN.. / Senior [valid from 2018-01-01]
SEN.. / Senior [valid from 2019-01-01]
SEN.. / Senior [valid from 2017-05-01]

如果showvalidrates = true预期结果如下,

ASSIST.. / Assistance [valid from 2019-01-01]
PROF.. / Professional [valid from 2019-01-01]
SEN.. / Senior [valid from 2019-01-01]

对于这个最新数据的过滤器，我已经实现了代码，所以没问题，您可以查看下面的演示，其中包含 app.js.

中使用的所有代码

工作演示： http://plnkr.co/edit/gFCfMhaFzTq1xHv1P3T1?p=preview

如果 showvalidrates = true，我需要帮助如何将过滤后的列表发送到 ng-options。 21=] ..

参考link:https://codepen.io/anon/pen/GbWKLp

这只是一个参考[=63=]，我需要在 plunker 中解决。在 codepen 中，它有效为属性并且基于该过滤器发生，同样我需要从来自

的结果中发送过滤后的值

const getDate = date => +date.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/g)[0].split('-').join('')

data = $scope.rateschedule[0].jobcategories.sort(({jobCategoryWithFromDate:date1}, {jobCategoryWithFromDate:date2}) => getDate(date2) - getDate(date1))

const getRecent = (data, i=0) => getDate(data[i].jobCategoryWithFromDate) === getDate(data[i + 1].jobCategoryWithFromDate) ? [data[i], ...getRecent(data, i+1)] : [data[i]]

getRecent(data).forEach(obj => console.log(JSON.stringify(obj)))

（在 codepen 中，过滤基于 valid 属性，同样在 plunker 中，我必须将过滤后的值发送到 ng-options）

因为我已经有了获取最新数据的过滤代码，请帮我把它发送到ng-options..

使用 select 框处理此问题的任何替代解决方案也更可取..

纠结了好久请大家帮我解决一下..

Answer 1

单个 hard-coded <option> 元素，其值设置为空字符串，可以嵌套到 <select> 元素中。此元素将代表 null 或 "not selected" 选项。¹

<h4>Select something below</h4>
<select id="s1" ng-model="selectedItem"
        ng-options="jobcat as jobcat.jobCategoryWithFromDate
                    for jobcat in item.jobcategories">
    <option value="">Select...</option>
</select>
<h3>The selected item:</h3>
<pre>{{selectedItem | json}}</pre>

Answer 2

希望这段代码对您有所帮助！

var app = angular.module('angularjs-starter', []);
    
    app.controller('MainCtrl', function($scope) {
      $scope.showvalidrates = false;
    
      $scope.rateschedule = [{
        "activity": "First activity",
        "rateschedule": "Rate Schedule Name",
        "jobcategories": [{
          id: 1,
          jobCategoryWithFromDate: "ASSIST.. / Assistance [valid from 2017-05-01]",
          valid: false
        }, {
          id: 2,
          jobCategoryWithFromDate: "ASSIST.. / Assistance [valid from 2018-01-01]",
          valid: false
        }, {
          id: 3,
          jobCategoryWithFromDate: "ASSIST.. / Assistance [valid from 2019-01-01]",
          valid: false
        }, {
          id: 4,
          jobCategoryWithFromDate: "PROF.. / Professional [valid from 2017-05-01]",
          valid: false
        }, {
          id: 5,
          jobCategoryWithFromDate: "PROF.. / Professional [valid from 2018-01-01]",
          valid: false
        }, {
          id: 6,
          jobCategoryWithFromDate: "PROF.. / Professional [valid from 2019-01-01]",
          valid: false
        }, {
          id: 7,
          jobCategoryWithFromDate: "SEN.. / Senior [valid from 2018-01-01]",
          valid: false
        }, {
          id: 8,
          jobCategoryWithFromDate: "SEN.. / Senior [valid from 2019-01-01]",
          valid: false
        }, {
          id: 9,
          jobCategoryWithFromDate: "SEN.. / Senior [valid from 2017-05-01]",
          valid: false
        }]
      }];
    
      const originData = angular.copy($scope.rateschedule);
      const uiData = angular.copy($scope.rateschedule);
    
      $scope.changeValidRates = function() {
    
        if ($scope.showvalidrates) {
        debugger;
          const getDate = date => +date.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/g)[0].split('-').join('')
    
          const data = uiData[0].jobcategories.sort(({
            jobCategoryWithFromDate: date1
          }, {
            jobCategoryWithFromDate: date2
          }) => getDate(date2) - getDate(date1))
    
          const getRecent = (data, i = 0) => getDate(data[i].jobCategoryWithFromDate) === getDate(data[i + 1].jobCategoryWithFromDate) ? [data[i], ...getRecent(data, i + 1)] : [data[i]]
    
          getRecent(data).forEach(obj => obj.valid = true)
    
    
          $scope.rateschedule[0].jobcategories = getRecent(data);
    
        } else {
    
          $scope.rateschedule = angular.copy(originData);
        }
    
      }
    
    
    
    
    });

<!DOCTYPE html>
<html ng-app="angularjs-starter">

<head lang="en">
  <meta charset="utf-8">
  <title>Custom Plunker</title>
  <script src="beautify-html.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <br>
  <input type="checkbox" ng-model="showvalidrates" ng-change="changeValidRates()"> Display only Valid Rates
  <br>
  <div ng-repeat="item in rateschedule">
    <h4>Select something below</h4>
    <select id="s1" ng-model="selectedItem" 
    ng-options="jobcat as jobcat.jobCategoryWithFromDate for jobcat in item.jobcategories | filter : {valid: showvalidrates}"></select>
    <h3>The selected item:</h3>
    <pre>{{selectedItem | json}}</pre>
  </div>
</body>

</html>

将过滤器值设置为 select 框中的选项

Set filter value as options in select box

javascript

angularjs

ng-options

angularjs-select