Ссылка на другой объект json (например, соединение SQL) в Angular JS

0

Мне нужно передать некоторые значения в json-объектах, как в SQL-таблицах (join).

Ниже приведена моя разметка:

<div data-ng-app="myApp1">
<div data-ng-controller="MyController">
    <div data-ng-repeat="item in items" >{{ item.Title }}
        <ul data-ng-repeat="tag in item.tags">
            <!--<li style="background-color: {{ tags[tag.Title].Category }}">{{tag.Title}}</li> NOT SURE ABOUT THIS PART-->
        </ul>
    </div>
</div>

Мой Javascript (угловой)

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

myApp.controller('MyController', function($scope) {
$scope.categories = [
{
    "Category": "Car",
    "Background": "red"
},
{
    "Category": "Bus",
    "Background": "green"
},
{
    "Category": "Bike",
    "Background": "blue"
}
];

$scope.tags = [
{
    "Title" : "Ferrari",
    "Category": "Car"
},
{
    "Title" : "Mercedez",
    "Category": "Car"
},
{
    "Title" : "Mercedez",
    "Category": "Bus"
},
{
    "Title" : "BMW",
    "Category": "Bike"
},
{
    "Title" : "BMW",
    "Category": "Car"
},
{
    "Title" : "Volvo",
    "Category": "Car"
}

]

$scope.items = [
{
    "Title": "Item 1",
    "tags": [
        {
            "Title" : "BMW"
        },
        {
            "Title" : "Volvo"
        },
        {
            "Title" : "Mercedez"
        }
    ]
},
{
    "Title": "Item 2",
    "tags": [
        {
            "Title" : "Mercedez"
        },
        {
            "Title" : "Ferrari"
        }
    ]
}
]

});

Полная скрипка здесь: http://jsfiddle.net/cyberpks/n61a1q5m/7/

Мне нужно установить background-color для tag в items которые будут ссылаться на tags.Title которое далее ссылается на categories.Background

  • 0
    У вас есть два Mercedez в теге с двумя разными категориями? почему предметы узнают, к какой категории он принадлежит? то же самое для BMW
  • 0
    необходимо сопоставить ваши массивы с hashmap или использовать функции фильтрации. В качестве альтернативы измените API, чтобы получить то, что вам нужно

1 ответ

0

Сначала сопоставьте categories с категориальным цветом, затем сопоставьте tags с объектом colors который может отображать цвет в категориях цветов

var catColors ={};
$scope.categories.forEach(function(cat){
    catColors[cat.Category]= cat.Background;
})
$scope.carColors ={};

$scope.tags.forEach(function(tag){    
    $scope.carColors[tag.Title] = catColors[tag.Category];
});

Применение:

 <li style="background-color: {{ carColors[tag.Title] }}">{{tag.Title}}</li>

DEMO

Ещё вопросы

Сообщество Overcoder
Наверх
Меню