Ng-repeat - 用不同的值過濾對象的常量屬性

我想解決一個ng-repeat問題。我可以看到兩種方法來解決它1.使用filter不重複/顯示對象的屬性category，我不知道如何使用它的值或2如果有方法可以說ng-repeat="i in items.drinks && items.sandwiches。Ng-repeat - 用不同的值過濾對象的常量屬性

有沒有通配符來說「類別」：「無論」？

因此，在這種情況下，我深入到item = bottled-drinks和/或sandwiches的位置。所以，當我做ng-repeat="i in item"category是我的意思。我不想要它。

JSON -

food-items": { 
       "bottled-drinks": { 
        "category": "Bottled Drinks", 
        "drinks": { 
         "drink1": { 
          "title": "Drink Me 1", 
          "calories": "170" 
         }, 
         "drink2": { 
          "title": "Drink Me 2", 
          "calories": "230" 
         }, 
         "drink3": { 
          "title": "Drink Me 3", 
          "calories": "88" 
         } 
        } 
       }, 
       "sandwiches": { 
        "category": "Sandwiches", 
        "sandwiches": { 
         "sandwich1": { 
          "title": "Sandwich Me 1", 
          "calories": "230" 
         }, 
         "sandwich2": { 
          "title": "Sandwich Me 2", 
          "calories": "111" 
         }, 
         "sandwich3": { 
          "title": "Sandwich Me 3", 
          "calories": "700" 
         } 
        } 
       }

來源

2016-09-30 RooksStrife

您是否控制該數據結構源？這是一個非常不友好的結構 – charlietfl

@charlietfl不，但你將如何構造它不同？一致屬性名稱的對象 – RooksStrife

陣列會更容易一大堆與和爲了工作做篩選或排序，你會需要映射到 – charlietfl

使用您現有的數據結構，這將讓你在那裏你想去的地方。

注意：如果更改了數據結構，實現起來會更容易。我會在底部顯示一個例子。

這是您當前配置的修復。

<div ng-controller="MyCtrl"> 
    <div ng-repeat="firstKey in firstKeys"> 
    <div ng-repeat="secondKey in secondKeys"> 
     {{ foodItems[firstKey][secondKey] }} 
    </div><br> 
    </div> 
    <br> 
</div> 

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 

    $scope.firstKeys = ["bottled-drinks", "sandwiches"]; 
    $scope.secondKeys = ["drinks", "sandwiches"]; 

    $scope.foodItems = { 
    "bottled-drinks": { 
     "category": "Bottled Drinks", 
     "drinks": { 
      "drink1": { 
      "title": "Drink Me 1", 
      "calories": "170" 
      }, 
      "drink2": { 
      "title": "Drink Me 2", 
      "calories": "230" 
      }, 
      "drink3": { 
      "title": "Drink Me 3", 
      "calories": "88" 
      } 
     } 
     }, 
     "sandwiches": { 
     "category": "Sandwiches", 
     "sandwiches": { 
      "sandwich1": { 
      "title": "Sandwich Me 1", 
      "calories": "230" 
      }, 
      "sandwich2": { 
      "title": "Sandwich Me 2", 
      "calories": "111" 
      }, 
      "sandwich3": { 
      "title": "Sandwich Me 3", 
      "calories": "700" 
      } 
     } 
     } 
    } 
    }

這將導致一個div使用這些值

{"drink1":{"title":"Drink Me 1","calories":"170"},"drink2":{"title":"Drink Me2","calories":"230"},"drink3":{"title":"Drink Me 3","calories":"88"}} 

{"sandwich1":{"title":"Sandwich Me 1","calories":"230"},"sandwich2":{"title":"Sandwich Me 2","calories":"111"},"sandwich3":{"title":"Sandwich Me3","calories":"700"}}

現在你可以使用你想使用的按鍵，但這並不容易做到。如果您的數據是這樣構造的...

$scope.edibles = [ 
    {"category": "Bottled Drinks", 
    "types": [ 
     {"title": "Drink Me 1", 
     "calories": "170"}, 

     {"title": "Drink Me 2", 
     "calories": "230"}, 

     {"title": "Drink Me 3", 
     "calories": "88"} 
    ]}, 

    {"category": "Sandwiches", 
    "types": [ 
     {"title": "Sandwich Me 1", 
     "calories": "230"}, 

     {"title": "Sandwich Me 2", 
     "calories": "111"}, 

     {"title": "Sandwich Me 3", 
     "calories": "700"} 
     ]} 
    ] 


<div ng-repeat="edible in edibles"> 
    <div ng-repeat="foodType in edible.types"> 
    Type: {{ foodType.title }}<br> 
    Calories: {{ foodType.calories }} 
    </div><br> 
</div>

來源

2016-09-30 17:04:02 SoEzPz

不是我想要的答案，但我做了NG-如果和我通過控制器我再檢查，看看是否存在I.標題...如果是的話顯示，如果不別。一定有更好的方法。

來源

2016-09-30 16:49:50 RooksStrife

因爲評論框有時是一種痛苦，我只把這個位置：

平板陣列是最簡單，最靈活和最有效的一起工作：

$scope.foodItems = [ // Array (not object) 
    { 
     "id": "drink1", 
     "label": "Drink Me 1", 
     "calories": "170" 
     "category": "bottled-drinks", 
    }, 
    { 
     "id": "sandwich1", 
     "label": "Sandwich Me 1", 
     "calories": "270" 
     "category": "sandwiches", 
    }, 
    ... (ALL ITEMS) 
]; 

// Categories are a different resource, so better keep them in their own array. 
// You'll thank me when you want move your stuff to some server-API. 
$scope.categories = [ 
    { "id": "sandwiches", "category-label": "Sandwiches" }, 
    { "id": "bottled-drinks", "category-label": "Bottled Drinks" }, 
];

HTML

<div ng-repeat="category in categories"> 
    <h2>{{ category.label }}<h2> 
    <div ng-repeat="item in foodItems" ng-if="item.category==category.id"> 
     <h3>{{ item.label }}</h3> 
     <p>Calories: {{ item.calories }}</p> 
     <p>Description: {{ item.description }} (or whatever) </p> 
    </div> 
</div>

你會注意到你必須過濾掉一些東西（ng-if），但是如果你和SoEzPz的解決方案（這也不錯）相比，你會更容易的時候想要sh下載一些自定義列表 - 例如顯示卡路里少於300卡的所有物品。（因爲你不需要連接數組或任何東西）

（有一種方法可以使用角度$過濾器，而不是ng-if ...類似於......（野生猜測在這裏！）但我會留給你去研究，因爲我不能承諾從我頭頂的語法是正確的。

此外，爲了徹底，我會使用一個基於數字的id（較少雜亂），並使用NG-重複track by獲得一些小的性能。

來源

2016-09-30 17:02:40 ippi

Ng-repeat - 用不同的值過濾對象的常量屬性

回答

相關問題