Question

这比预期的要困难得多。

我有两个阵列：一个用于产品，一个用于选项。每个产品都应该有自己的选项数组。

当我尝试为每个产品提供具有自己范围的自己的选项数组时，问题就出现了，这意味着当选择一个选项时，它只适用于该产品的$ scope而不是任何其他选项。

有人建议我将[$ index]添加到数组中，但这似乎不起作用。我无法检索此数组中的特定值。

options数组包含以下ID :(名称，价格，有效）。在我尝试通过将活动布尔值设置为true并过滤这些结果之前...但无论哪种方式都没问题，简而言之我需要检索所选选项的名称和价格值...

这并不是最容易解释的，所以请耐心等待...感谢您的光临。

选项视图html

<md-card ng-repeat="item in items.results | filter:true">
     <img ng-src="{{item.img}}" 
          class="md-card-image" 
          alt="">
     <md-card-content class="content">
          <h2 class="md-title">{{ item.name }}</h2>
          <h4>{{ item.price | currency }}</h4>
          <md-list>
              <p class="md-subhead">Choose Your Flavor</p>
              <md-divider></md-divider>
              <md-list-item ng-repeat="option in options.results" 
                            layout="row">
                  <p> {{ option.name }} </p>
                  <span flex></span>
                  <p> {{ option.price | currency}} </p>
                  <md-checkbox aria-label="option.active"
                               class="md-accent" 
                               ng-model="item.flavor[$index]">
                  </md-checkbox>
              </md-list-item>
          </md-list>
       </md-card-content>
       <md-action-bar layout="row" 
                      layout-align="end center">
           <md-button class="md-fab md-accent fab" 
                      aria-label="Remove From Cart" 
                      ng-click="remove(item)"                               
                      ng-class="{active:item.active}">
               <md-icon md-svg-src="img/icons/remove.svg"></md-icon>
           </md-button>
       </md-action-bar>
 </md-card>

以下是我试图使用这些值的订单html ..

<md-card>
    <md-card-content>
        <md-list>
            <span class="md-subhead">Review Order</span>
            <md-divider></md-divider>
            <md-list-item ng-repeat="item in items.results | filter:true" 
                          layout="row">
                <span>{{ item.name }}</span>
                <span flex></span>
                <span>{{ item.price | currency}}</span>
                <span ng-repeat="flavor in item.flavor | filter:true">
                    {{flavor}}
                </span>          
            </md-list-item>
            <md-divider></md-divider>
            <md-list-item layout="row">
                <span>Order Total :</span>
                <span flex></span>
                <span>{{ total(items.results) | currency}}</span>
            </md-list-item>
        </md-list>   
    </md-card-content>
</md-card>

Answer 1

您可以在控制器中创建以下功能，而不是尝试使用ng-model指令

$scope.addOption = function(item, opt) {
    var index = item.flavors.indexOf(opt);
    if(index > -1) {
        item.flavors.splice(index, 1);
    }
    else
        item.flavors.push(opt);
}

$scope.checkOption = function(item, opt) {
    return item.flavors.indexOf(option) > -1
}

并将您的HTML更改为

<md-checkbox aria-label="option.active"
           class="md-accent" 
            ng-checked="checkOption(item, option)"
           ng-click="addOption(item, option)">
</md-checkbox>

然后您可以按如下方式访问这些口味

<div ng-repeat="flavor in item.flavors">[{{flavor.name}} : {{flavor.price}}] </div>

您可以测试这个想法here

AngularJS使用ng-model为ng-repeat数组中的项目赋值并检索这些值

1 个答案: