Угловой JS пользовательский заказ по функции

Question

Как я могу получить значение входного текста и сравнить со значением объекта с массивом?

Когда я печатаю имя свойства массива комментариев, необходимо заказать этот текст, который был напечатан.

Например, укажите тип автора по автору. Я ищу об этом, прочитал документацию, но я не нашел решения. Могу ли я передать функцию в порядке? Я стараюсь, но не работает.

Я нашел слишком много примеров, передающих только одно значение или без ввода текста, и я хочу передать 3 варианта на заказ, если автор, рейтинг или дата, но если кто-то напечатает эти слова во входном тексте.

Почему не работает так:

Sort by: <input type="text" ng-model="**sortBy**"> 
        <div ng-repeat="dishcomment in dishCtrl.dish.comments|filter:**sortBy**"> 

---

var dish={ 
    name:'Uthapizza', 
    image: 'images/uthapizza.png', 
    category: 'mains', 
    label:'Hot', 
    price:'4.99', 
    description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', 
    comments: [ 
     { 
      rating:5, 
      comment:"Imagine all the eatables, living in conFusion!", 
      author:"John Lemon", 
      date:"2012-10-16T17:57:28.556094Z" 
     }, 
     { 
      rating:4, 
      comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!", 
      author:"Paul McVites", 
      date:"2014-09-05T17:57:28.556094Z" 
     }, 
     { 
      rating:3, 
      comment:"Eat it, just eat it!", 
      author:"Michael Jaikishan", 
      date:"2015-02-13T17:57:28.556094Z" 
     }, 
     { 
      rating:4, 
      comment:"Ultimate, Reaching for the stars!", 
      author:"Ringo Starry", 
      date:"2013-12-02T17:57:28.556094Z" 
     }, 
     { 
      rating:2, 
      comment:"It's your birthday, we're gonna party!", 
      author:"25 Cent", 
      date:"2011-12-02T17:57:28.556094Z" 
     } 
    ] 
}; 

this.dish = dish; 

Sort by: <input type="text" ng-model="searchBox"> 
      <div ng-repeat="dishcomment in dishCtrl.dish.comments | orderBy:searchBox track by $index"> 
      <blockquote> 
       <p>{{dishcomment.rating}} Stars</p> 
       <p>{{dishcomment.comment}}</p> 
       <small>{{dishcomment.author}} 
       {{dishcomment.date | date:'MMM.dd, yyyy'}}</small> 
      </blockquote> 

Answer 1

Вместо HTML фильтров можно попробовать положить фильтры на код контроллера и обновить список на ng- изменение ввода. Это будет:

1. Легче понять.

2. Будет лучше для большого списка, так как количество созданных наблюдателей будет намного меньше, чем фильтры html.

   $scope.sortBy = function(){ 
   if($scope.dish.comments.hasOwnProperty($scope.sortByProp)){ 
   
       //sort the comments by the property 
       $scope.dish.comments = sortedComments; 
   
   }} 
   

Ниже приводится фрагмент кода HTML:

<input type="text" ng-model="sortByProp" ng-change="sortBy()"> 

Answer 2

Вы можете написать пользовательский фильтр в угловой, как показано ниже:

app.filter('commentsFilter', function ($filter) {  
    return function (inputArray, orderBy) { 
    var outputArray = []; 

    if (order) { 
     angular.forEach(inputArray, function (input) { 
      if(orderBy === 'author'){ 
       // Sort by author logic goes here 
       // Modify outputArray with sorted data 
      } 
      if(orderBy === 'date'){ 
       // Sort by date logic goes here 
       // Modify outputArray with sorted data 
      }     
     }); 
    } else { 
     return inputArray; 
    } 
    return outputArray; 
    }; 
}); 

HTML фрагмент кода, как показано ниже

Sort by: <input type="text" ng-model="searchBox"> 
     <div ng-repeat="dishcomment in dishCtrl.dish.comments | commentsFilter:searchBox track by $index"> 
     <blockquote> 
      <p>{{dishcomment.rating}} Stars</p> 
      <p>{{dishcomment.comment}}</p> 
      <small>{{dishcomment.author}} 
      {{dishcomment.date | date:'MMM.dd, yyyy'}}</small> 
     </blockquote> 
     </div>