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數組類型的過濾器

回答

相關問題