Set filter value as options in select box

Question

In Angularjs app, i am using ng-options to display the user and valid from date.

Here i am having a checkbox which will be checked default means only valid rates needs to be displayed..

Here valid rates mean the rates which have recent date for each user..

If showvalidrates = false expected result as follows,

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]

If showvalidrates = true expected result as follows,

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

For this filter of latest data i have already implemented code so no problem for it, You can look at the demo below which has all the code used in app.js.

Working Demo: http://plnkr.co/edit/gFCfMhaFzTq1xHv1P3T1?p=preview

I am in need of help in the part how to send this filtered list to the ng-options if showvalidrates = true.. Else if it is false then it will display all the records from item.jobcategories ..

Reference link: https://codepen.io/anon/pen/GbWKLp

This is just a reference link and i need to solution in the plunker. In codepen, it has valid as property and based on that filter happens, sameway i am in the need to send the filtered values from the result comes from

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)))

(Here in codepen, filter happens based on valid property, likewise in plunker i have to send the filtered value to ng-options)

As i already have the filtering code to get latest data, kindly help me to send it to ng-options..

Any alternative solution to handle this with select box would also be more appreciable..

Struggling for long long time please help me with good solution..

Answer 1

Hope this snippet helps!

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

A single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option.¹

<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>