Select 在 ng-repeat 中使用 ng-options 和 ng-model

Question

早上好，

希望大家复活节过得愉快，

在开始之前，我想指出这是在 ServiceNow Orlando 版本中开发的，它使用 AngularJS 1.6.10

我被一段棘手的代码困住了，我无法正确处理，我正在使用 ng-repeat 构建硬件设备目录，在本例中是笔记本电脑，我们添加了一个按钮这可以让人们快速将设备添加到购物车，我们现在想要添加一个数量字段，以便可以同时添加多个设备，我成功了，但是 AngularJS 在开头添加了一个空单元格，我需要将其默认设置为 1，我确实做到了这一点，但它破坏了购物车体验，因为无论选择什么数量，添加到购物车的每件商品都是 1。

所以这是大部分 html 代码，其中还包括构建硬件设备的 ng-repeat，我使用的是每个人似乎都推荐的 ng-options，在 Stack 中阅读了很多溢出。

问题出在 ng-model 上，因为它被设置为 $scope.items[0] 它永远不会更新，我一直在看 getterSetter 但此刻我的头脑非常混乱，可以'让它工作。

 <div class="col-sm-6 col-md-4 funky-show-hide" ng-show="selectedCat==item.categoryBelongTo" ng-repeat="item in data.items track by $index">
    <div class="panel panel- b" >
      <a target="" ng-href="" ng-click="onClick($event, item)" class="panel-body block">
        <div class="overflow-100">
          <h4 class="m-t-none m-b-xs hrline"><span ng-if="item.content_type == 'external'"> <i ng-if="data.isDownloadable.indexOf(item.sys_id) ==-1" class="fa fa-external-link-square" aria-hidden="true" style="color: #498fcc;"></i><i ng-if="data.isDownloadable.indexOf(item.sys_id) >-1" class="fa fa-download" aria-hidden="true" style="color: #498fcc;"></i></span></h4>
          <img ng-src="" ng-if="item.picture" class="m-r-sm m-b-sm item-image pull-left" />
          <div class="text-muted item-short-desc"></div>
        </div>
      </a>
      <div class="panel-footer" >
        <span  ng-if="item.u_show_price == 'true'" class="pull-right item-price font-bold"></span> &nbsp;
        <button ng-if="item.u_show_add_to_cart_button == 'true' " name="submit" ng-disabled="submitted" ng-click="triggerAddToCart(item.sys_id, selected.label)" class="btn btn-primary">${Add to Cart}</button>
        <select ng-if="item.u_show_quantity_button == 'true'"
                name="Quantity"
                id="quantity"
                ng-disabled="submitted"
                ng-model="selected"
                class="form-control quantity-selector"
                data-toggle="tooltip"
                tooltip-top="true" 
                data-original-title="${Quantity}"
                ng-options="item as item.label for item in items track by item.id">
        </select>
      </div>
    </div>
  </div>

控制器：

$scope.items = [{
    id: 1,
    label: '1'
}, {
    id: 2,
    label: '2'
}, {
    id: 3,
    label: '3'
}];

$scope.selected = $scope.items[0];

一切看起来像什么：

所以我在 Performance PC Laptop 上选择了“3”，但是如果您查看右侧的控制台日志，您可以看到增加的值为 1。

Picture to display value added to cart

真的很遗憾，我对空单元格很满意，但这是客户想要的，我知道我可以用一些文本更新空单元格，但他们真的希望它默认为 1。

任何建议，我将不胜感激，

无聊的熊猫

Answer 1

用 ng-show 替换 ng-if 解决了我的问题，花了几天时间试图解决这个问题，还开发了一个更简单的数字增量解决方案

代码在这里：

<input type="number" value="1" min="1" max="20" step="1" ng-model="items_increment" title="Quantity" ng-show="item.u_show_quantity_button == 'true'"/>

$scope.items_increment = 1;

希望对其他人有所帮助。

Select 在 ng-repeat 中使用 ng-options 和 ng-model

Select inside ng-repeat with ng-options and ng-model

html

angularjs

angularjs-ng-repeat

angularjs-ng-model

angularjs-ng-options