AngularJS：为绑定动态ng-model的select设置默认选项

嘿，我之前也碰到过类似的场景，其实你的问题主要有两个关键点要解决：属性名大小写不匹配，以及正确初始化ng-model的值，咱们一步步来搞定：

第一步：修正属性名大小写问题 #

首先看你的代码，控制器里的masterAttributes数组用的是小写的id、values，但HTML模板里绑定的是大写的Id、Values——AngularJS是严格区分大小写的，这会导致你的ng-model和ng-options根本没法正确绑定数据，这是首要解决的问题！

咱们把属性名统一成一致的风格，比如都用驼峰式（或者全小写，只要统一就行），这里我改成和模板匹配的大写开头：

修改后的APP.JS代码：

var tantoSvagoApp = angular.module('tantoSvagoApp');
tantoSvagoApp.controller("ricercaAttivita", function ($scope) {
  $scope.masterAttributes = [
    {"Id" : "11", "nome" : "MARCHE", "Values" : [{ "Id": "114", "nome": "ANCONA" }, { "Id": "116", "nome": "ASCOLI PICENO" }] },
    {"Id" : "12", "nome" : "LOMBARDIA", "Values" : [{ "Id": "120", "nome": "MILANO" }, { "Id": "121", "nome": "BERGAMO" }] }
  ];

  // 这里接下来设置默认值
});

HTML代码保持不变（因为已经是masterAttribute.Id和masterAttribute.Values了）。

第二步：设置默认选中值 #

现在属性名匹配了，你只需要在控制器里给每个masterAttribute.Id赋值对应的选项Id，就能让对应的select默认选中该选项。

场景1：默认选中第一个选项 #

如果想让每个select默认选中第一个选项，直接遍历masterAttributes赋值就行：

// 在控制器初始化代码后面添加
$scope.masterAttributes.forEach(function(attr) {
  // 选中第一个选项，如果需要默认选中"全部"（空选项），就赋值为""
  attr.Id = attr.Values[0].Id;
});

场景2：根据特定条件设置默认值 #

如果需要满足特定条件时选中特定选项（比如当属性是"MARCHE"时选中ASCOLI PICENO），可以加判断逻辑：

$scope.masterAttributes.forEach(function(attr) {
  if (attr.nome === "MARCHE") {
    // 选中Id为116的选项（ASCOLI PICENO）
    attr.Id = "116";
  } else if (attr.nome === "LOMBARDIA") {
    // 选中Id为121的选项（BERGAMO）
    attr.Id = "121";
  }
  // 如果不需要默认选中，或者其他条件，也可以赋值为""对应空选项"Tutte"
});

原理说明 #

AngularJS的ng-options是通过ng-model的值来匹配选项的——当ng-model的值等于ng-options里定义的attr.Id时，对应的选项就会被默认选中。所以只要确保masterAttribute.Id的值和你想选中的选项的Id一致，就能实现默认选中的效果。

内容的提问来源于stack exchange，提问作者Peppe