Convert delimited string and an array of objects

How can I convert between a delimited string and an array of objects with data binding?

ng-list will work with an array of strings. But I have an array of objects, in which I would like to delimit the text property so the text in the array can be editable.

Works with Array of Strings:

$scope.arrayStrings = ["one", "two", "three"];

<textarea ng-model="arrayStrings" ng-list="&#10;" ></textarea>

How can I get this to work with objects:

$scope.arrayObjects = [{
  text: "one",
  selected: true
}, {
  text: "two",
  selected: true
}, {
  text: "three",
  selected: true
}];

<textarea ng-model="arrayObjects" ng-list="&#10; | text" ></textarea>

Here's a demo in plunker

One possible idea I had was to use ng-list on the array of strings and then map that to the array of objects. The use a $watch to update the object array anytime the string array changed. However, this still falls short because it will overwrite any other properties on the object every time the array updates. (Demo in previous plunker revision)

$scope.$watch('arrayStrings', function() {
  $scope.arrayObjects = $scope.arrayStrings.map(function(s){
    return {
      text: s,
      selected: true
    }
  });
})

Update:

There still seem to be issues when using ng-list even when using Krzysztof's suggestion:

toString: function() { return s }

Overriding the toString method helps the set of objects when initially displayed, but as soon as you type anything, ng-list converts the set of objects back into an array of strings because at that point toString has not come into play.

To clarify what I'm trying to do. I really want a list of objects, with editable titles, that can also be selected. I'd like to preserve selections even when the title has changed or items have been added.

Here's another plunker to demonstrate

screenshot

Answer

July 27, 2014

KyleMit

While Krzysztof's suggestion was helpful, I couldn't quite get the binding to work with ng-list because the ng-list will always convert the array of objects into an array of strings, thus overriding any objects I had on scope.

In this case, the simplest thing to do was to upgrade from ng-list to something with full object support like most tagging libraries:

I Implemented ngTagsInput like this:

HTML:

<tags-input ng-model="arrayObjects" display-property="text"></tags-input>

JavaScript:

$scope.arrayObjects = [
  { "text": "one"   , "selected": false },
  { "text": "two"   , "selected": false },
  { "text": "three" , "selected": false }
];

This way each object is given it's own element where the text property is displayed and they are all formatted together to live inside of an input. Changing one object just updates that single element

Here's a demo in plunker

Update:

Here's another plunker to demonstrate

Answer

Demo in Pluner