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

如果需要ng-options，该部分需要如何将过滤后的列表发送到showvalidrates = true的帮助。否则，如果显示为false，它将显示{{1}中的所有记录} ..

参考链接： https://codepen.io/anon/pen/GbWKLp

这只是一个参考链接，我需要在插头中解决。在codepen中，它具有有效的as属性，并且基于发生过滤器的原因，同样，我需要从结果中发送过滤后的值来自

item.jobcategories

（在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)))属性发生，同样在plunker中，我也必须将过滤后的值发送给ng-options）

由于我已经具有获取最新数据的过滤代码，请帮助我将其发送到valid。

使用选择框来处理此问题的任何替代解决方案也将更为可取。

长期苦苦挣扎，请为我提供良好的解决方案。

Answer 1

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

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>

Answer 2

可以将单个硬编码的<select>元素（其值设置为空字符串）嵌套在null元素中。然后，此元素将表示<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>或“未选中”选项。¹

response.body().get(i).getLinks().getWpFeaturedmedia().get(0).getHref()));

在选择框中将过滤器值设置为选项

2 个答案: