AngularJS中ng-list绑定数组后输入框为空问题咨询

我之前也碰到过一模一样的问题！明明调试确认数组有值，但输入框就是显示空白，给你几个排查和解决的方向：

1. 确认数组元素都是字符串类型 #

ng-list默认是基于字符串的双向绑定，如果你的textbook.keywords数组里包含数字、对象或者其他非字符串类型，可能无法正确渲染成逗号分隔的文本。可以先把数组元素转成字符串试试：

// 在控制器里处理数组
$scope.textbook.keywords = $scope.textbook.keywords.map(item => String(item));

2. 检查ng-list的分隔符配置 #

虽然你用了ng-list=","（和默认一致），但有时候输入框的显示需要带空格的分隔符（比如", "），如果数组里的元素没有空格，试试显式指定：

<input class="fill" 
       name="keywords" 
       ng-model="textbook.keywords" 
       type="text" 
       ng-list=", " 
       ng-required="true">

3. 确保textbook对象已提前初始化 #

如果textbook是异步加载或者后续才赋值的，可能导致绑定失效。建议在控制器开头先初始化空对象：

// 控制器初始化时先创建textbook对象
$scope.textbook = {};
// 后续再给keywords赋值
$scope.textbook.keywords = ['前端开发', 'AngularJS', '组件化'];

4. 排查CSS样式问题 #

别忽略样式的坑！如果.fill类设置了和背景色相同的文字颜色，或者输入框的padding/height设置导致文字被隐藏，看起来也会是空的。可以临时去掉class="fill"测试一下。

测试示例 #

如果以上都没问题，试试这个最简验证案例：

控制器代码 #

angular.module('myApp', [])
.controller('MyController', function($scope) {
  $scope.textbook = {
    keywords: ['JavaScript', 'HTML', 'CSS']
  };
});

HTML代码 #

<div ng-app="myApp" ng-controller="MyController">
  <input ng-model="textbook.keywords" type="text" ng-list=",">
</div>

这个案例应该能正常显示JavaScript,HTML,CSS，如果这个能行，再逐步加回你的class和其他属性排查冲突。

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