通過鍵角js ng-repeat堆積

我是Angular JS的新手，知道基本的功能。我正在努力使用ng-repeat和過濾器選項來通過非唯一鍵獲得所需的輸出。通過鍵角js ng-repeat堆積

我想通過顏色或製作類別在html中顯示汽車。所以期望的結果，我想看到的是（在此情況下，選擇彩色）：

Sort by: CarID, Make or **Color** 
Blue 
    Focus 
Red 
    Camry 
    Mustang 
Yellow 
    LandCruiser

從控制器來的陣列是：

cars: [ 
{ 
    "carid": 1, 
    "makeid": 1, 
    "carname": 'camry', 
    "color": 'red' 
}, 
{ 
    "carid": 2, 
    "makeid": 2, 
    "carname": 'mustang', 
    "color": 'red' 
}, 
{ 
    "carid": 3, 
    "makeid": 1, 
    "carname": 'landcruiser', 
    "color": 'yellow' 
}, 
{ 
    "carid": 4, 
    "makeid": 1, 
    "carname": 'focus', 
    "color": 'blue' 
}, 
{ 
    "carid": 5, 
    "makeid": 3, 
    "carname": 'civic', 
    "color": 'blue' 


    } 
] 

make: [ 
    { 
     "makeid": 1, 
     "makeName": 'Toyota' 
    }, 
    { 
     "makeid": 2, 
     "makeName": 'Ford' 
    }, 
    { 
     "makeid": 3, 
     "makeName": 'Civic' 
    } 
]

我試圖用以下HTML，但沒有工作

<div class="car" ng-repeat="car in cars track by color"> 
    <label>{{car.color}}</label> 
    <div class="subcar" ng-repeat="c in cars filer by car.color"> 
     <label>{{c.carname}}</label> 
    </div> 
</div>

另外有了上面的查詢，我怎麼用Make來替換過濾器中的顏色一旦用戶點擊Make鏈接？

來源

2016-04-14 hss

'filer by car.color'？該格式的文檔在哪裏？ – Patrick

也許看到這個http://stackoverflow.com/questions/14733136/ng-repeat-filter-by-single-field和過濾器頁面https://docs.angularjs.org/api/ng/filter/filter關於如何應用過濾器。而不是輸入元素，你也可以使用按鈕，下拉菜單，... –

你可以利用角度濾波模塊和GROUPBY回收來實現你所追求的：

<div ng-app="myApp"> 
    <div ng-controller="myCtrl"> 
    <a href="" ng-click="ourGrouper ='color'">Color</a> 
    <a href="" ng-click="ourGrouper ='makeid'">Make</a> 

    <ul ng-repeat="(key, value) in cars | groupBy:ourGrouper"> 
     <li> 
     <span ng-if="ourGrouper=='makeid'">{{(make | filter:{makeid:key})[0].makeName}}</span> 
     <span ng-if="ourGrouper=='color'">{{key}}</span> 
     <ul> 
      <li ng-repeat="car in value"> 
      {{car.carname}} 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div>

這部作品根據您提供的對象的數組，但確實是不理想...... JSON ISN」實際上設計爲通過id來引用其他對象，上面的設置更像是用來規範SQL數據庫的結構。如果您對這些JSON對象有任何控制權，請將兩者合併，以便makeName替換該makeid。

喜歡的東西：

$scope.cars = [{ 
    "carid": 1, 
    "makeName": 'Toyota', 
    "carname": 'camry', 
    "color": 'red' 
}];

然後你可以刪除ng-if條件邏輯在ng-repeat，只是把{{key}}

工作例如： https://jsfiddle.net/r0m4n/pn0g3rrg/

參考文檔的模塊： https://github.com/a8m/angular-filter#groupby

來源

2016-04-15 02:23:24 r0m4n

謝謝。這工作得很好。我也會研究改變數據結構。 – hss

我還有一個問題，如果我想添加「所有汽車」作爲選項。該石斑魚將如何表現？ all cars然後跨度： {{key}} – hss

@hss你應該沒問題，你可以設置你的樣式有點不同，然後傳遞一個空字符串給像這樣的石斑魚：https：//jsfiddle.net/r0m4n/pn0g3rrg/1/ – r0m4n

通過鍵角js ng-repeat堆積

回答

相關問題