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

Question

结果比预期的要难得多。

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

The problem starts when I try to give each product its own options array with its own scope, meaning when one option is selected it only pertains to that product's $scope and not any other.

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

选项数组具有这些 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 数组中的项目赋值并检索这些值

AngularJS assign values to items in ng-repeat array using ng-model and retrieve those values

arrays

angularjs

angularjs-ng-repeat

angular-ngmodel