angularjs 1.x数组类型的过滤器

-1

我有很多像下面的数组对象，现在我想对它应用过滤器。我怎么能应用滤镜像我有提到在图像：angularjs 1.x数组类型的过滤器

我可以使用简单的AngularJS过滤器就可以了？

请帮助我应用这些过滤器的最佳方法。提前致谢。我在这个JSON中有多个酒店数据。但我并不是因为空间而一刀切。

[ 
    { 
     "_id": "57da6aeb4eafac04afd01bc5", 
     "name": "subways", 
     "city": "lahore", 
     "area": "johar town", 
     "min_order": "200 AED", 
     "del_time": "1 hour", 
     "del_fees": "1 AED", 
     "pre_order": "NA", 
     "rating_star": "4", 
     "rating_no": 514, 
     "status": "OPEN", 
     "__v": 0, 
     "categories": [ 
      { 
       "_id": "57da72e94eafac04afd01bc9", 
       "restaurant_id": "57da6aeb4eafac04afd01bc5", 
       "name": "subways Burger", 
       "category_id": "1", 
       "__v": 0, 
       "items": [ 
        { 
         "_id": "57da7973d0b5e2059c5ff10a", 
         "restaurant_id": "57da6aeb4eafac04afd01bc5", 
         "category_id": "57da72e94eafac04afd01bc9", 
         "logo": "abcLogo", 
         "name": "subway item 1", 
         "detail": "great item", 
         "price": "10", 
         "rating": "5", 
         "__v": 0 
        }, 
        { 
         "_id": "57da79e8d0b5e2059c5ff10b", 
         "restaurant_id": "57da6aeb4eafac04afd01bc5", 
         "category_id": "57da72e94eafac04afd01bc9", 
         "logo": "abcLogo", 
         "name": "subway item 2", 
         "detail": "great item", 
         "price": "10", 
         "rating": "5", 
         "__v": 0 
        }, 
        { 
         "_id": "57da79efd0b5e2059c5ff10c", 
         "restaurant_id": "57da6aeb4eafac04afd01bc5", 
         "category_id": "57da72e94eafac04afd01bc9", 
         "logo": "abcLogo", 
         "name": "subway item 3", 
         "detail": "great item", 
         "price": "10", 
         "rating": "5", 
         "__v": 0 
        }, 
        { 
         "_id": "57da79fcd0b5e2059c5ff10d", 
         "restaurant_id": "57da6aeb4eafac04afd01bc5", 
         "category_id": "57da72e94eafac04afd01bc9", 
         "logo": "abcLogo", 
         "name": "subway item 4", 
         "detail": "great item", 
         "price": "10", 
         "rating": "5", 
         "__v": 0 
        } 
       ] 
      } 
]

来源

2016-09-30 Muhammad irfan Mayo

如果它是一个angular2应用程序，你将需要实现自定义管道/过滤器和使用它，因为由于性能问题，angular2没有内置的排序过滤器。 –

当然你可以使用Angular JS过滤器，所以你可以继续向我们展示你到目前为止尝试过的东西吗？ – nikjohn

没有即时通讯不在角度2它是在角度1.x –

一个简单的AngularJS过滤器来处理这样的操作如下：

angular.module("myapp", []) 
 
    .controller("myctrl", function myctrl($scope) { 
 

 
    $scope.cityIncludes = []; 
 
     
 
    
 
    $scope.includeCity = function(city) { 
 
     console.log(city); 
 
     var i = $scope.cityIncludes.indexOf(city); 
 
     if (i > -1) { 
 
     $scope.cityIncludes.splice(i, 1); 
 
     } else { 
 
     $scope.cityIncludes.push(city); 
 
     } 
 
     console.log($scope.cityIncludes); 
 
    } 
 

 
    $scope.cityFilter = function(city) { 
 
     if ($scope.cityIncludes.length > 0) { 
 
     if ($scope.cityIncludes.indexOf(city.city) < 0) 
 
      return; 
 
     } 
 

 
     return city; 
 
    } 
 

 
    $scope.rests = [{ 
 
     "_id": "57da6aeb4eafac04afd01bc5", 
 
     "name": "Lahore Restaurant", 
 
     "city": "lahore", 
 
     "area": "johar town", 
 
     "min_order": "200 AED", 
 
     "del_time": "1 hour", 
 
     "del_fees": "1 AED", 
 
     "pre_order": "NA", 
 
     "rating_star": "4", 
 
     "rating_no": 514, 
 
     "status": "OPEN", 
 
     "__v": 0, 
 
     "categories": [{ 
 
     "_id": "57da72e94eafac04afd01bc9", 
 
     "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
     "name": "subways Burger", 
 
     "category_id": "1", 
 
     "__v": 0, 
 
     "items": [{ 
 
      "_id": "57da7973d0b5e2059c5ff10a", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 1", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79e8d0b5e2059c5ff10b", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 2", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79efd0b5e2059c5ff10c", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 3", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79fcd0b5e2059c5ff10d", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 4", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }] 
 
     }] 
 
    }, { 
 
     "_id": "57da6aeb4eafac04afd01bc5", 
 
     "name": "islamabad rest", 
 
     "city": "islamabad", 
 
     "area": "johar town", 
 
     "min_order": "200 AED", 
 
     "del_time": "1 hour", 
 
     "del_fees": "1 AED", 
 
     "pre_order": "NA", 
 
     "rating_star": "4", 
 
     "rating_no": 514, 
 
     "status": "OPEN", 
 
     "__v": 0, 
 
     "categories": [{ 
 
     "_id": "57da72e94eafac04afd01bc9", 
 
     "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
     "name": "subways Burger", 
 
     "category_id": "1", 
 
     "__v": 0, 
 
     "items": [{ 
 
      "_id": "57da7973d0b5e2059c5ff10a", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 1", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79e8d0b5e2059c5ff10b", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 2", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79efd0b5e2059c5ff10c", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 3", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79fcd0b5e2059c5ff10d", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 4", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }] 
 
     }] 
 
    }, { 
 
     "_id": "57da6aeb4eafac04afd01bc5", 
 
     "name": "abcd", 
 
     "city": "rawalpindi", 
 
     "area": "johar town", 
 
     "min_order": "200 AED", 
 
     "del_time": "1 hour", 
 
     "del_fees": "1 AED", 
 
     "pre_order": "NA", 
 
     "rating_star": "4", 
 
     "rating_no": 514, 
 
     "status": "OPEN", 
 
     "__v": 0, 
 
     "categories": [{ 
 
     "_id": "57da72e94eafac04afd01bc9", 
 
     "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
     "name": "subways Burger", 
 
     "category_id": "1", 
 
     "__v": 0, 
 
     "items": [{ 
 
      "_id": "57da7973d0b5e2059c5ff10a", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 1", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79e8d0b5e2059c5ff10b", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 2", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79efd0b5e2059c5ff10c", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 3", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79fcd0b5e2059c5ff10d", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 4", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }] 
 
     }] 
 
    }, { 
 
     "_id": "57da6aeb4eafac04afd01bc5", 
 
     "name": "asdadsasdasdas", 
 
     "city": "karachi", 
 
     "area": "johar town", 
 
     "min_order": "200 AED", 
 
     "del_time": "1 hour", 
 
     "del_fees": "1 AED", 
 
     "pre_order": "NA", 
 
     "rating_star": "4", 
 
     "rating_no": 514, 
 
     "status": "OPEN", 
 
     "__v": 0, 
 
     "categories": [{ 
 
     "_id": "57da72e94eafac04afd01bc9", 
 
     "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
     "name": "subways Burger", 
 
     "category_id": "1", 
 
     "__v": 0, 
 
     "items": [{ 
 
      "_id": "57da7973d0b5e2059c5ff10a", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 1", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79e8d0b5e2059c5ff10b", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 2", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79efd0b5e2059c5ff10c", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 3", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79fcd0b5e2059c5ff10d", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 4", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }] 
 
     }] 
 
    }, { 
 
     "_id": "57da6aeb4eafac04afd01bc5", 
 
     "name": "multan asdasda", 
 
     "city": "multan", 
 
     "area": "johar town", 
 
     "min_order": "200 AED", 
 
     "del_time": "1 hour", 
 
     "del_fees": "1 AED", 
 
     "pre_order": "NA", 
 
     "rating_star": "4", 
 
     "rating_no": 514, 
 
     "status": "OPEN", 
 
     "__v": 0, 
 
     "categories": [{ 
 
     "_id": "57da72e94eafac04afd01bc9", 
 
     "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
     "name": "subways Burger", 
 
     "category_id": "1", 
 
     "__v": 0, 
 
     "items": [{ 
 
      "_id": "57da7973d0b5e2059c5ff10a", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 1", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79e8d0b5e2059c5ff10b", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 2", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79efd0b5e2059c5ff10c", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 3", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }, { 
 
      "_id": "57da79fcd0b5e2059c5ff10d", 
 
      "restaurant_id": "57da6aeb4eafac04afd01bc5", 
 
      "category_id": "57da72e94eafac04afd01bc9", 
 
      "logo": "abcLogo", 
 
      "name": "subway item 4", 
 
      "detail": "great item", 
 
      "price": "10", 
 
      "rating": "5", 
 
      "__v": 0 
 
     }] 
 
     }] 
 
    }] 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myapp" ng-controller="myctrl"> 
 

 

 
    <ul> 
 
    <li ng-repeat="rest in rests track by rest.city"> 
 
     <input name="rest.city" type="checkbox" value="rest.city" ng-click="includeCity(rest.city)"> 
 
     <label for="rest.city">{{rest.city}}</label> 
 
    </li> 
 

 
    </ul> 
 

 
    <ul> 
 
    <li ng-repeat="rest in rests | filter: cityFilter"> 
 
     <p ng-bind="rest.name"></p> 
 
     <p ng-bind="'Rating ' + rest.rating_star"></p> 
 
     <p ng-bind="'Status ' + rest.status"></p> 
 
     <p ng-bind="'Area ' + rest.area"></p> 
 
    </li> 
 
    </ul> 
 

 

 
</body>

你可以使用这个概念。

来源

2016-09-30 14:30:22 nikjohn

你能告诉我怎么我可以执行这个同样的行动点击“开放餐厅”单选按钮。意思是我想要点击一些开放的餐馆时，所有的酒店都会检查status ='open'并显示 –

这很简单 - 您可以在响应中的每个键上创建过滤器。我会稍微更新我的答案。 – nikjohn

感谢nikjohn的帮助，你可以请告诉更新在这三个步骤对代表的选择开餐厅搜索名称 2.select箱 1，输入型“OPEN”的美食选择 3.检查框。 PLZ执行这三个表示感谢 –

我已经完成

我有任何一个选择的所有类型的美食收音机框。我将它保存到具有以下功能的范围类型变量中。现在问题是我如何过滤它兄弟。

<ul> 
    <li> 
     <input name="rest.cusine" type="radio" value="india" ng-click="filterCuisine('indian')"> 
     <label for="open status">india</label> 
    </li> 
    <li> 
     <input name="rest.cusine" type="radio" value="india" ng-click="filterCuisine('pakistani')"> 
     <label for="open status">pakistan</label> 
    </li> 
    <li> 
     <input name="rest.cusine" type="radio" value="arabic" ng-click="filterCuisine('arabic')"> 
     <label for="open status">arabic</label> 
    </li> 

    </ul>

功能用于获取所选择的菜肴

$scope.filterCuisine = function(cuisine){ 
    $scope.checkFilterCuisine = cuisine; 
    console.log($scope.checkFilterCuisine); 
}

我怎么在这个函数应用过滤器

$scope.selectCuisine = function(city){ 
    console.log(city.cuisines); 
if (city.cuisines.length > 0 && $scope.checkFilterCuisine != '') { 
    if (city.cuisines.indexOf($scope.checkFilterCuisine) < 0){ 
     return; 
     } 
    } 
    return city; 
}

来源

2016-10-01 07:53:01

angularjs 1.x数组类型的过滤器

回答

相关问题