Editing a delimited string using multiple input fields in AngularJS

Question

I am trying to do the following quite unsuccessfully so far.

I have an string that is semicolon separated. Say a list of emails, so

'[email protected];[email protected];[email protected]'

What I am trying to accomplish is split this string (using split(';')) into an array of strings or array of objects (to aid binding). Each of the items I would like to bind to different input elements. After editing I want to read the concatenated value again to send to my backend.

Problem is that when editing one of the split inputs, the original item value is not update (which makes sense as I am guessing the individual items are copies of parts of the original), but I am wondering if there is a way to do something like that. Note that I want this to go both ways, so watching the individual inputs and updating the original one manually, would just fire an infinite loop of updates.

I have tried a few different ways, including creating an items property get/set using Object.defineProperty to read and right to the string (set was never fired).

take a look at this plnker

Answer 1

You can construct a temporary array on each field update in order to do the string replacement of the old segment with the new value. In order to tackle the lost focus problem you will have to use the ngReapeat's track by $index. The internal array will not be recreated unless you add the separator to your original string.

Here is the complete solution on Plunker