转换分隔字符串和对象数组

Question

如何使用数据绑定在分隔字符串和对象数组之间进行转换？

ng-list将使用一组字符串。但我有一个对象数组，我想在其中分隔text属性，以便数组中的文本可以编辑。

使用字符串数组：

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

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

如何让它与对象一起使用：

$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

---

我有一个可能的想法是在字符串数组上使用ng-list，然后将其映射到对象数组。在字符串数组发生更改时，使用$watch更新对象数组。但是，这仍然不足，因为每次数组更新时它都会覆盖对象上的任何其他属性。 （以前的plu​​nker修订演示）

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

---

更新

即使使用Krzysztof's suggestion

，使用ng-list时仍然存在问题

toString: function() { return s }

覆盖toString方法有助于最初显示对象集，但只要您输入任何内容，ng-list就会将对象集转换回字符串数组，因为此时toString {{1}} 1}}还没有发挥作用。

澄清我想要做的事情。我真的想要一个带有可编辑标题的对象列表，也可以选择。即使标题已更改或已添加项目，我也希望保留选择。

Here's another plunker to demonstrate

Answer 1

toSting()

JavaScript使用方法toString()来表示文本值。默认情况下，toString()方法由来自Object的每个对象继承。如果在自定义对象中未覆盖此方法，则toString（）将返回"[object type]"，其中type是对象类型。

覆盖toSting（）

方法`toSting（）几乎可以覆盖JavaSctript

中的所有内容

$scope.arrayObjects = $scope.arrayStrings.map(function(s){
    return {
        text: s,
        selected: true,
        toString: function() {
            return '{text: "' + s + '"}' // this will be returned instead of [object Object]
        }
    }
});

Answer 2

虽然Krzysztof's suggestion很有用，但我无法使绑定与ng-list一起使用，因为ng-list将始终将对象数组转换为字符串数组，从而覆盖我在范围内的任何对象。

在这种情况下，最简单的方法是从ng-list升级到具有完全对象支持的东西，如大多数标记库：

• ngTagsInput
• angular-tags
• bootstrap-tagsinput

我实现了像这样的ngTagsInput：

<强> 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 }
];

这样，每个对象都被赋予它自己的元素，其中显示文本属性，并且它们都被格式化在一起以存在于输入内部。更改一个对象只会更新该单个元素

Demo in Pluner