Angular js ng-yineleme tuşu ile kilitleme

Question

Angular JS uygulamasında yeniyim ve temel işlevleri biliyorum. İstenilen çıkışı benzersiz olmayan anahtarlar ile elde etmek için ng-tekrar ve filtre seçeneklerini kullanmakta zorlanıyorum.

Arabaları html cinsinden renkle göstermek veya kategoriler oluşturmak istiyorum.

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

denetleyici gelen dizilerdir:

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' 
    } 
] 

aşağıdaki html kullanmaya çalıştı ama hiçbir işe

için bu yüzden (Renk seçilir bu durumda) 'dir görmek istiyorum sonucu istenen

Ayrıca, yukarıdaki sorguda, Bir kez kullan kullanıcı ile Yap bağlantısını tıklatarak filtrede rengi nasıl değiştiririm?

Answer 1

Sen sonra ne elde etmek açısal filtre modülü ve GroupBy koleksiyonunu faydalanabilirler:

<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> 

Bu nesnelerin sizin sağlanan diziler dayalı çalışır ancak gerçekten ideal değildir ... JSON değil mi' t diğer nesnelerin kimliğine göre referans vermek için tasarlanmış, yukarıda sahip olduğunuz kurulum bir SQL veritabanını normalleştirmek için kullanacağınız bir yapıdır. Bu JSON nesneleri üzerinde herhangi bir denetiminiz varsa, ikiyi birleştirin, böylece makeName makeid'in yerini alır.

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

Ve sonra ng-repeat yılında ng-if koşullu mantık kaldırmak olabilir ve sadece {{key}}

Çalışma örnek koymak:

şey gibi modül için dokümanlara https://jsfiddle.net/r0m4n/pn0g3rrg/

Referans: