Question

{

    name: 'Product One',
    visibility: 1,
    weight: '0.5',
    price: '19.99'
    custom_attributes: [
        {
            attribute_code: 'image',
            value: '.img'
        },
        {
            attribute_code: 'special_price',
            value: '13.99'
        }
    ]

},
{

    name: 'Product One',
    visibility: 1,
    weight: '0.5',
    price: '19.99'
    custom_attributes: [
        {
            attribute_code: 'image',
            value: '.img'
        },
        {
            attribute_code: 'special_price',
            value: '13.99'
        }
    ]

}

如何在ng-repeat或javascript上访问“ special_price”值？

Answer 1

有几种方法可以解决这个问题。

准备控制器中的数据

function ExampleCtrl (products) {
  this.$onChanges = (changes) => {
    if (changes.products) {
    this.specialProductPrices = this.products.reduce((map, product) => {
      map[product.id] = product.custom_attributes
        // @TODO: Account for a case when there is no special price.
        .find(({attribute_code}) => attribute_code === 'special_price').value;
      return map;
    }, {})
    }
  }
}

angular.module('foo').component('example', {
  bindings: {
    products: '<'
  },
  controller: [
    ExampleCtrl
  ],
  template: `
    <div ng-repeat="product in $ctrl.products track by product.id">
      Name: <span ng-bind="product.name"></span>
      Price: <span ng-bind="product.price"></span>
      Special Price: <span ng-bind="$ctrl.specialProductPrices[product.id]"></span>
    </div>
  `
})

然后该组件可以简单地用作<example products="products"></example>。这主要是angularjs领域的惯用方法，总体而言，由于使用了组件+精简器，因此每个$ digest循环中仅准备一次数据，而不是多次循环。

在模板的循环中访问它

如果您必须在模板中执行此操作，则可以执行以下操作：

<div ng-repeat="product in $ctrl.products track by product.id">
  Name: <span ng-bind="product.name"></span>
  Price: <span ng-bind="product.price"></span>
  Special Price:
  <span>
    <span ng-repeat="customAttribute in product.custom_attributes track by customAttribute.attribute_code"
      ng-show="customAttributeattribute_code === 'special_price'"
      ng-bind="customAttribute.value">
    </span>
  </span>
</div>

但是不建议使用此方法，因为它会创建永远不会显示的DOM元素（{ng-if在这种情况下由于转发器而无法使用。）。此外，如果有许多自定义属性，这会变得非常效率低下。

其他选项

还可以潜在地创建包含product.custom_attributes并显示属性（如果存在）的组件，或者创建一个过滤器，也可以选择属性。这些方法留给读者练习。

循环嵌套对象AngularJS

1 个答案:

准备控制器中的数据

在模板的循环中访问它

其他选项