AngularJS中如何将数组值绑定到Bootstrap Tokenfield输入框value属性

嘿，作为刚接触AngularJS的新手，遇到这个问题太正常啦！我给你两种实用的方案，帮你把数组完美绑定到Tokenfield输入框里：

方法一：用Angular原生绑定转字符串 #

Tokenfield的输入框本身支持逗号分隔的字符串作为初始值，我们可以利用Angular的数组方法join(',')，直接把数组转成符合要求的格式绑定到输入框：

修改你的HTML代码：

<div class="form-group">
  <label for="inputEmail3" class="col-sm-2">Should</label>
  <div class="col-xs-5">
    <input 
      name="should" 
      id="should" 
      type="text" 
      ng-value="somevalues.join(',')" 
      placeholder="should requirement" 
      class="form-control setmargin">
  </div>
</div>

也可以直接用插值表达式实现同样效果：

value="{{ somevalues.join(',') }}"

这样Angular会自动把$scope.somevalues数组转成"abc,pqr,hhhh"格式的字符串，Tokenfield会自动识别这些值并渲染成对应的token。

方法二：用Tokenfield API手动同步（更适配动态场景） #

如果你的Tokenfield已经通过JS初始化过，或者数组是后续通过Ajax动态获取的，直接设置value可能会出现组件内部状态不同步的问题。这时候可以结合Tokenfield的setTokens方法和Angular的$watch监听：

在你的控制器里添加这段代码：

// 确保DOM渲染完成后再初始化Tokenfield
$timeout(function() {
  var tokenfield = $('#should').tokenfield();
  
  // 深度监听数组变化，元素新增/删除都能触发更新
  $scope.$watch('somevalues', function(newValues) {
    if (newValues && newValues.length) {
      // 把数组直接传给Tokenfield更新显示
      tokenfield.tokenfield('setTokens', newValues);
    }
  }, true);
});

这个方案的优势在于，不管数组是初始赋值还是后续动态更新，Tokenfield都会同步刷新显示的token，完全避免绑定不同步的问题。

小提醒 #

• 一定要等Angular完成DOM渲染后再初始化Tokenfield，用$timeout就能轻松做到，避免出现找不到DOM元素的报错。
• 如果数组是通过Ajax异步获取的，优先选第二种方法，它能自动监听数组变化并更新组件。

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