如何在Angular JS Listbox中设置指定项为选中状态

我来帮你搞定这个问题！AngularJS里实现多选列表框默认选中其实核心是利用ng-model和对象引用的匹配，很多人踩坑都是因为没注意到引用的问题，我给你一步步讲清楚：

第一步：确保HTML结构正确 #

首先你的列表框必须支持多选，所以要给<select>标签加上multiple属性，同时用ng-options绑定数据源，ng-model绑定一个数组（多选场景下必须用数组）：

<div ng-app="fruitApp" ng-controller="FruitController">
  <!-- multiple属性开启多选，ng-model绑定选中项数组 -->
  <select multiple ng-model="selectedFruits" ng-options="fruit.name for fruit in fruits"></select>
</div>

第二步：控制器中正确初始化选中项 #

这是最关键的一步！如果你的水果数据是对象数组（比如你提到的“各类水果数据”大概率是这种），千万不要直接新建对象来赋值，必须从原数据源中筛选出对应的项——因为AngularJS是通过对象引用来判断选中状态的。

举个完整的控制器例子：

angular.module('fruitApp', [])
.controller('FruitController', function($scope) {
  // 假设这是你已经填充好的水果数据源
  $scope.fruits = [
    {name: 'Apple'},
    {name: 'Banana'},
    {name: 'Orange'},
    {name: 'Watermelon'}, // 如果你的拼写是Watermellon，这里改成对应的即可
    {name: 'Grape'}
  ];

  // 页面加载时筛选出需要选中的项
  $scope.selectedFruits = $scope.fruits.filter(function(fruit) {
    // 匹配你需要默认选中的水果名称
    return fruit.name === 'Apple' || fruit.name === 'Watermelon';
  });
});

特殊情况：如果你的水果数据是字符串数组 #

如果你的数据源是单纯的字符串数组（比如['Apple', 'Banana', ...]），那就更简单了，直接给selectedFruits赋值对应的字符串数组就行：

angular.module('fruitApp', [])
.controller('FruitController', function($scope) {
  $scope.fruits = ['Apple', 'Banana', 'Orange', 'Watermelon', 'Grape'];
  // 直接赋值字符串数组即可
  $scope.selectedFruits = ['Apple', 'Watermelon'];
});

常见坑点提醒 #

• 忘记加multiple属性：这样列表框只能单选，即使给ng-model赋值数组也没用
• ng-model绑定的不是数组：多选场景下ng-model必须是数组类型，不能是单个变量
• 选中项用了新对象：比如直接写selectedFruits = [{name: 'Apple'}]，这个对象和原数组里的不是同一个引用，AngularJS识别不出来，自然不会选中

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