使用AngularJS中的多个输入字段编辑分隔的字符串

mas*_*plo 5 javascript string user-input angularjs angularjs-directive

到目前为止,我试图做到以下几点失败.

我有一个以分号分隔的字符串.说一个电子邮件列表,所以

'email1@example.com;email2@example.com;email3@example.com'
Run Code Online (Sandbox Code Playgroud)

我想要完成的是将此字符串(使用split(';'))拆分为字符串数组或对象数组(以帮助绑定).我想要绑定到不同输入元素的每个项目.编辑后我想再次读取连接值以发送到我的后端.

问题是当编辑其中一个分割输入时,原始项目值不会更新(这是有意义的,因为我猜测单个项目是原始部分的副本),但我想知道是否有办法做某事像那样.请注意,我希望这两种方式,所以观看单个输入并手动更新原始输入,只会触发无限循环的更新.

我尝试了几种不同的方法,包括使用Object.defineProperty创建一个item属性get/set来读取和右边的字符串(set永远不会被触发).

看看这个plnker

cle*_*ris 4

您可以在每个字段更新时构造一个临时数组,以便用新值对旧段进行字符串替换。为了解决失去焦点的问题,您必须 通过 $index 使用 ngReapeat 的轨道。除非将分隔符添加到原始字符串中,否则不会重新创建内部数组。

这是Plunker 上的完整解决方案