Question

我有一个带有以下数组的角度应用程序：

countries = [{"code": "ZA", "name": "South Africa"}, {"code": "CH", "name": "Switzerland"}]

选择Jade如下：

select(ng-model='myCountry', ng-options='country.name for country in countries')

我想要做的是根据代码预先选择一个国家/地区：

select(ng-model='myCountry', ng-options='country.name for country in countries', ng-selected='country.code=="CH"')

显然，此解决方案不起作用，因为ng-selected不打算在select中使用，而是在选项标签中使用。

对我来说，使用条件选择而不是angularJS example中的默认索引值非常重要。

Answer 1

这就是ng-model的用途。我建议你在控制器中初始化myCountry。请注意，myCountry理想情况下应与国家/地区具有相同的格式（例如：{"code": "ZA", "name": "South Africa"}）。

编辑：我在我自己的项目中添加一个例子：

<select class="small" data-ng-change="goToTask(current_task.id)" data-ng-model="current_task" data-ng-options="task.name for task in tasks track by task.id"></select>

在控制器中：

$scope.current_task = { id: $scope.myService.getCurrentTaskId() };

这里重要的是current_task至少是一个包含id密钥的哈希。

Edit2：我正在考虑跟踪的排序问题。我认为您可以使用select代替，例如：`ng-options =“select country.code as country.name for country in countries”。我没有尝试过，但是从有角度的文档来看，它应该可行。

Answer 2

从您上面的示例中看起来您应该在控制器中执行此操作：

$scope.myCountry = $scope.countries.filter(function(c){ return  c.code==="CH"})[0];

像这样：

<script>
  function MyCntrl($scope) {
    $scope.countries = [{"code": "ZA", "name": "South Africa"}, {"code": "CH", "name": "Switzerland"}];
    $scope.myCountry = $scope.countries.filter(function(c){ return  c.code==="CH"})[0];
  }
  </script>

或者您可以尝试使用和ngRepeat建立选择，这似乎更接近您的需求，如下所示：

Online Demo

<body ng-app="">
    <script>
  function MyCntrl($scope) {
    $scope.countries = [{"code": "ZA", "name": "South Africa"}, {"code": "CH", "name": "Switzerland"}];      
  }
  </script>
  <div ng-controller="MyCntrl">    
    <select ng-model="myCountry" >
      <option ng-selected="c.code=='CH'" ng-repeat="c in countries">{{c.name}}</option>
    </select><br>
  {{myCountry |json}}
</body>

在ng-options中选择条件的默认值

2 个答案: