Question

我有一系列产品，显示在带有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与类别数组中的waves-testnet.conf进行匹配，然后返回类别标签。

在实际的Wordpress PHP中这很简单，因为它们为这项任务提供了一个功能。

Answer 1

使用Array#find()甚至更高效的是使用id作为属性键创建类别标签的哈希图

使用find（）

ctrl.getCat = function(product){
  let cat = categories.find(e => e.id === product.cat)
  return cat ? cat.label : 'Unknown';
}

或者作为hashmap：

ctrl.catLabels = categories.reduce((a,c) => { a[c.id] = c.label; return a;},{})

然后在视图中：

{{ctrl.catLabels[product.cat]}}

Answer 2

最简单的方法是创建一个已经映射类别的新产品数组。使用产品和类别初始化控制器时，请创建一个新数组，然后映射它。

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="angular.js@1.5.x" 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>&nbsp;<span>Category: {{product.category}}</span>
    </div>
  </body>

</html>

AngularJS：通过匹配不同的属性获取数组中的对象属性？

2 个答案: