javascript angularjs ng-options angularjs-select

Set filter value as options in select box

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

Solution

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>