У меня есть массив продуктов, отображаемых в таблице с помощью AngularJS ng-repeat.
Продукты представляют собой массив объектов, возвращаемых при вызове Wordpress REST API, и каждый объект имеет «категорию», которая возвращается в виде числа.
Пример: { "name": "Foo", "cat": 12 }
Я не могу просто привязаться к свойству «cat», так как оно отображает «12», и я хочу вместо этого отображать метку категории.
Я могу запросить список всех категорий и получить такой массив:
[
{ label: 'Customer Engagement Solutions', id: 2 },
{ label: 'Small and Medium Business', id: 13 },
{ label: 'Customer Information Management', id: 4 },
{ label: 'eCommerce', id: 25 },
{ label: 'Location Intelligence', id: 16 },
{ label: 'Enterprise', id: 12 }
]
Мой продукт выше, «Foo», должен отображать «Enterprise», то есть 12.
Я знаю, что могу выполнить привязку к функции, например, {{ctrl.getCat(product)}}но я не уверен, как выполнить сопоставление элемента IDв продукте с элементом в массиве категорий и вернуть метку категории .
Это тривиально сделать в реальном Wordpress PHP, поскольку они предоставляют функцию для этой самой задачи.
Самый простой способ - создать новый массив продуктов, который уже отображает категории. Когда вы инициализируете контроллер с продуктами и категориями, создайте новый массив карт.
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
const _categories = [
{ label: 'Customer Engagement Solutions', id: 2 },
{ label: 'Small and Medium Business', id: 13 },
{ label: 'Customer Information Management', id: 4 },
{ label: 'eCommerce', id: 25 },
{ label: 'Location Intelligence', id: 16 },
{ label: 'Enterprise', id: 12 }
];
const _products = [
{ "name": "Foo", "cat": 12 },
{ "name": "Bar", "cat": 16 },
{ "name": "Foo Bar", "cat": 12}
]
let categoryMap = {}
_categories.forEach( (category)=>{
categoryMap[category.id] = category.label;
})
this.products = _products.map( (product)=>{
return {
"name": product.name,
"category": categoryMap[product.cat]
}
})
});<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<div ng-repeat="product in ctrl.products">
<span>Name: {{product.name}}</span> <span>Category: {{product.category}}</span>
</div>
</body>
</html>Эта статья взята из Интернета, укажите источник при перепечатке.
Если есть какие-либо нарушения, пожалуйста, свяжитесь с[email protected] Удалить.
я говорю два предложения