转换定界字符串和对象数组

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>

这是pluker的演示

---

我有一个可能的想法是在字符串数组上使用ng-list，然后将其映射到对象数组。 每当字符串数组更改时，使用$watch更新对象数组。 但是，这仍然不足，因为每次数组更新时，它将覆盖对象上的所有其他属性。 （先前的punker版本中的演示）

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

---

更新：

即使使用Krzysztof的建议 ，使用ng-list似乎仍然存在问题：

toString: function() { return s }

覆盖toString方法可在最初显示对象组时提供帮助，但是一旦键入任何内容， ng-list将对象组转换回字符串数组，因为此时toString尚未发挥作用。

为了澄清我要做什么。 我确实想要具有可编辑标题的对象列表，也可以选择这些对象。 我想保留选择，即使标题已更改或项目已添加。

这是另一个示范

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的建议很有帮助，但我无法完全绑定到ng-list因为ng-list总是将对象数组转换为字符串数组，从而覆盖了我在作用域上拥有的所有对象。

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

• ngTagsInput
• 角标签
• 自举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 }
];

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

柱塞演示