1

如何访问每个后续行中的第一个数量和价格值：

在这种情况下，“选择”是由一些单选按钮设置的变量。

<tr ng-repeat="(qty, price) in product.sizes[selection]">
  <td><input type="radio"> <% qty %></td>
  <td><% price %></td>
  <td>You save (actual calc more complex) {{price - FIRSTROWPRICE}}</td>
</tr>

我可以通过使用 $first/ng-if 来阻止最后一行进行数学运算，这样就没有问题了。

这是数据：

   {
    "name": "The product",
    "sizes": {
      "2x2": { "100": "55", "200": "80", "300": "95"},
      "3x3": { "100": "155", "200": "180", "300": "195"}
      }
  }

并使用一些单选按钮选择“选择”参数：

<form>
  <div class="radio" ng-repeat="(size, data) in product.sizes">
    <label>
      <input type="radio" value="{{ size }}" ng-model="$parent.selection"> {{ size }}
    </label>
  </div>
</form>
4

1 回答 1

1

这是一个解决方案：

首先，您需要在示波器上使用一个函数来跟踪哪个键先出现：

// in controller
$scope.setFirst(key, isFirst) {
    if(isFirst) { $scope.first = key; }
};

现在，在您看来，您可以这样做：

<tr ng-repeat="(qty, price) in product.sizes[selection]" ng-init="setFirst(qty,$first)">
  <td><input type="radio"> <% qty %></td>
  <td><% price %></td>
  <td>You save (actual calc more complex) {{price - product.sizes[first]}}</td>
</tr>

或者，您可能希望通过仅存储第一个价格来减少计算次数：

$scope.setFirstPrice(price, isFirst) {
    if(isFirst) { $scope.firstPrice = price; }
}

和

<tr ng-repeat="(qty, price) in product.sizes[selection]" ng-init="setFirstPrice(price,$first)">
  <td><input type="radio"> <% qty %></td>
  <td><% price %></td>
  <td>You save (actual calc more complex) {{price - product.sizes[first]}}</td>
</tr>

您选择哪种取决于您的需求。关键步骤是使用控制器上的功能来跟踪首先呈现的价格。

请注意：

JavaScript不保证hashmap 对象中参数的顺序！浏览器可能会选择以不同的顺序输出项目，因此您可能并不总是首先获得预期的项目。如果顺序真的很重要，请考虑将数据结构重新排列为对象数组，例如：

"sizes": {
    "2x2": [{ price:"100", qty:"55"}, {price:"200", qty:"80"}, {price:"300", qty:"95"}],
    // etc
}

如果顺序sizes很重要，您将希望对该对象执行相同的操作。

可能没问题，只要确保在所有要支持的浏览器中进行彻底测试。

于 2013-08-28T04:15:30.860 回答