AngularJS多选框报错：Cannot read property 'length' of undefined 求助

我帮你分析下这个问题，这是Angular UI-Select多选组件的典型坑，我之前也踩过类似的坑😉。你遇到的TypeError: Cannot read property 'length' of undefined错误，核心原因是多选模式下，你绑定的ng-model变量没有被初始化为数组。当你点击选项时，组件会尝试读取这个变量的length属性来管理选中项，但你的addRecipient.selection一开始是undefined，自然就报错了。

快速修复方案 #

只需要修改控制器里的初始化代码，把addRecipient.selection初始化为空数组就行：

// 把原来的$scope.addRecipient = {};改成下面这样
$scope.addRecipient = {
  selection: [] // 多选组件必须绑定数组，这是关键！
};
$scope.addRecipients = [];
$.each(success.data.d.results, function (ind, val) {
  $scope.addRecipients.push({'name': val.Title, 'email':val.Email});
});

额外检查点（确保万无一失） #

你的HTML代码看起来没问题，但可以再确认这几点：

• 已经正确添加了multiple属性（你已经加了，这点没问题）
• ui-select-choices里的repeat表达式变量和数据源匹配（additional in addRecipients是正确的）
• ui-select-match里的$item.name能正确访问选中项的属性（这点也没问题）

为什么这个修复有效？ #

UI-Select的多选模式本质是用数组来存储所有选中的项，组件会依赖这个数组做很多操作——比如获取选中数量（读length）、添加新选中项（用push）。如果绑定的变量是undefined，这些操作自然会抛出类型错误。初始化空数组后，组件就能正常处理选中逻辑了。

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