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

标签 javascript string angularjs angularjs-directive user-input

到目前为止,我正在尝试执行以下操作,但没有成功。

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

'email1@example.com;email2@example.com;email3@example.com'

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

问题是,当编辑其中一个拆分输入时,原始项目值不会更新(这是有道理的,因为我猜测各个项目是原始项目的一部分的副本),但我想知道是否有办法做那样的事情。 请注意,我希望这是双向的,因此观察各个输入并手动更新原始输入只会触发无限循环的更新。

我尝试了几种不同的方法,包括使用 Object.defineProperty 创建项目属性 get/set 以读取和访问字符串(set 从未触发)。

take a look at this plnker

最佳答案

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

这是 complete solution on Plunker

关于javascript - 使用 AngularJS 中的多个输入字段编辑分隔字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22304137/

相关文章:

javascript - 如何使用firebased数据库事务?

javascript - Justified Gallery 中的悬停图标

php 使用 preg 自定义解析字符串

python - 正则表达式类型错误 : 'NoneType' object is not callable

javascript - Angular 1.3 getter setter ng-model

javascript - for await 给出 SyntaxError : Unexpected reserved word inside a async function

javascript - 如果先前单击的元素和鼠标移动,则保持悬停类

python - 如何显示包含 django 模板变量的字符串?

javascript - $scope 对象到 URL?

javascript - 如何获得具有特定属性的嵌套对象的计数?