Question

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

从下面的脚本中可以看出，＆＃34; ng-model＆＃34;中已经存在class_id。在选项框中，它仍然没有在选项中选择class_id的选项中选择该值。

选择框后，更改＆＃34; ng-model＆＃34;获得更新，模型也会使用选项的class_id进行更新。

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

同样的小提琴是here

＆＃13;

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"
        }]
      }
    }
  })

＆＃13;

<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>

＆＃13;

Answer 1

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

使用select as将select表达式的结果绑定到模型，但和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 expression已成功应用于 items数组中的每个项目。因为已设置所选选项以编程方式在控制器中，跟踪表达式也是如此应用于ngModel值。在第一个示例中，ngModel值是项目[0]，并且通过表达式的轨道评估项目[0] .id 没有任何问题。在第二个示例中，ngModel值是items [0] .subItem 并且track by expression评估为items [0] .subItem.id（即未定义）。因此，模型值不与任何匹配并且显示为没有选定的值。

＆＃13;

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"
        }]
      }
    }
  })

＆＃13;

<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>

＆＃13;

在angularjs

1 个答案: