Установите значение фильтра в качестве параметров в поле выбора - PullRequest
Новая
       53

Установите значение фильтра в качестве параметров в поле выбора

0 голосов
/ 22 июня 2019

В приложении 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 .. В противном случае, если оно ложно, тогда будут отображаться все записи из item.jobcategories ..

Ссылка: https://codepen.io/anon/pen/GbWKLp

Это просто ссылочная ссылка, и мне нужно решение в плунжере. В 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 ..

Любое альтернативное решение, позволяющее справиться с этим в поле выбора, также будет более заметным.

Долго боролись, пожалуйста, помогите мне с хорошим решением ..

Ответы [ 2 ]

1 голос
/ 22 июня 2019

Надеюсь, этот фрагмент поможет! 

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>



  
  Custom Plunker
  
  
  



  

   Display only Valid Rates
  

  
    Select something below
    
    The selected item:
    {{selectedItem | json}}
0 голосов
/ 22 июня 2019

Один элемент с жестким кодом <option>, значение которого равно пустой строке, может быть вложен в элемент <select>.Этот элемент затем будет представлять параметр null или «не выбран». 1 

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