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

时间：2016-09-30 13:50:56

标签： javascript angularjs

我在阵列中有很多像下面的对象，现在我想对它应用过滤器。我如何应用过滤器就像我在图像中提到的那样：

enter image description here

我可以使用简单的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
                    }
                ]
            }
]

2 个答案:

答案 0 :(得分：0)

用于处理此类操作的简单AngularJS过滤器如下所示：

＆＃13;
＆＃13; 
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
        }]
      }]
    }]
  });
＆＃13; 
  <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>
＆＃13;
＆＃13;
＆＃13;

你可以使用这个概念。

答案 1 :(得分：0)

我已经完成了

任何一个选择时，我都有各种菜肴的收音机盒。我将其保存到具有以下功能的范围类型变量中。现在的问题是我如何过滤它。

  <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;
}
相关问题
最新问题