带有角度 ng-model 问题的引导标签输入答案

【问题标题】：Bootstrap tagsinput with angular ng-model issue带有角度 ng-model 问题的引导标签输入
【发布时间】：2017-01-14 02:32:48
【问题描述】：

我有一个角度形式，它正在创建一个带有标签的对象：

<form class="form-horizontal">
 <div class="form-group">
  <label>Tags</label>
  <input type="text" id="tags-input" class="form-control" ng-model="beaconData.tag_list" name="beacon[tag_list]" placeholder="project, client 72, yellow, design"/>
 </div>

id "#tags-input" 正在调用 tagsinput 函数，如下所示：

$('#tags-input').tagsinput('items');

通过 id 调用此函数，ng-model="beaconData.tag_list" 返回未定义。如果未调用 tagsinput 函数，则 ng-model 会毫无问题地返回数据。

~~有没有人知道为什么会这样？~~

更好的问题可能是 tagsinput 函数对输入值做了什么，为什么它不返回 ng-model？

【问题讨论】：

当你没有这个 jQuery 代码模型时填充数据？
正确，这个 jQuery 代码确实格式化了输入字段中的标签
你能分享更多你的js代码吗？因为这一行似乎并没有连接到该 beaconData。
就是这样。我已将问题缩小到作为框架一部分的 tagsinput 函数。该函数的文件在这里：Tagsinput
当我正确理解时，您的字段由这个标签输入插件填充，但它们没有反映到模型中？

标签： javascript angularjs twitter-bootstrap bootstrap-tags-input

【解决方案1】：

在同事的帮助下，我能够获取 tagsinput 吐出的 span 的值并将其插入到我的对象中进行保存。

    var tags = angular.element('.form-group div').children('span').map(function (i, s) { return angular.element(s).text(); });

【讨论】：