选择框值未在 angularjs 中预先选择的问题

Question

为什么我的选择框选项在加载时没有被选中？

正如您从下面的脚本中看到的那样，选择框的“ng-model”中已经有一个 class_id，但它没有在选项中选择该值，而 class_id 出现在选项中。

选择框更改后，“ng-model”会更新，模型也会更新为选项的 class_id。

需要将选择框选项设置为选项预选的class_id。

同样的小提琴是here

angular
  .module("app", [])
  .controller("test", function($scope) {
    $scope.cartData = {
      order: [{
        class_id: 1,
        price: 121
      }, {
        class_id: 2,
        price: 11
      }],
      selectedSection: {
        classes: [{
          class_id: 1,
          name: "adsad"
        }, {
          class_id: 2,
          name: "2222"
        }]
      }
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<div ng-app="app">
  <ul class="bxslider" ng-controller="test">{{test}}
    <li class="mbm" ng-repeat="seat in cartData.order">
      <div class="box">
        <div class="select-style">
          Selected id: {{seat.class_id}}
          <select ng-options="type.class_id as type.name for type in cartData.selectedSection.classes track by type.class_id" ng-model="seat.class_id">
            <!-- <option ng-repeat="type in cartData.selectedSection.classes" value="{{type.class_id}}">{{type.name}}</option> -->
          </select>
        </div>
        <div class="price-sec">
          <span class="price">Price: {{seat.price}}</span>
        </div>
      </div>
    </li>
  </ul>

</div>

Answer 1

从ng-options 中删除track by type.class_id。正如角度文档所说

使用 select as 会将选择表达式的结果绑定到 模型，但和 html 元素的值将 可以是索引（对于数组数据源）或属性名称（对于 对象数据源）集合中的值。如果一个轨道通过 使用表达式，该表达式的结果将被设置为 选项和选择元素的值。

$scope.items = [{
  id: 1,
  label: 'aLabel',
  subItem: { name: 'aSubItem' }
}, {
  id: 2,
  label: 'bLabel',
  subItem: { name: 'bSubItem' }
}];

这将起作用：

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0];

but this will not work:

<select ng-options="item.subItem as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0].subItem;

在这两个示例中，track by 表达式都成功应用于 items 数组中的每个项目。因为选择的选项已经设置 以编程方式在控制器中，表达式的跟踪也是 应用于 ngModel 值。在第一个示例中，ngModel 值 是 items[0] 并且 track by 表达式的计算结果为 items[0].id 没有任何问题。在第二个示例中，ngModel 值为 items[0].subItem 并且 track by 表达式的计算结果为 items[0].subItem.id （即 不明确的）。结果，模型值不匹配任何 并且 显示为没有选定的值。

angular
  .module("app", [])
  .controller("test", function($scope) {
    $scope.cartData = {
      order: [{
        class_id: 1,
        price: 121
      }, {
        class_id: 2,
        price: 11
      }],
      selectedSection: {
        classes: [{
          class_id: 1,
          name: "adsad"
        }, {
          class_id: 2,
          name: "2222"
        }]
      }
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<div ng-app="app">
  <ul class="bxslider" ng-controller="test">{{test}}
    <li class="mbm" ng-repeat="seat in cartData.order">
      <div class="box">
        <div class="select-style">
          Selected id: {{seat.class_id}}
          <select ng-options="type.class_id as type.name for type in cartData.selectedSection.classes " ng-model="seat.class_id">
            <!-- <option ng-repeat="type in cartData.selectedSection.classes" value="{{type.class_id}}">{{type.name}}</option> -->
          </select>
        </div>
        <div class="price-sec">
          <span class="price">Price: {{seat.price}}</span>
        </div>
      </div>
    </li>
  </ul>

</div>