2

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

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

适用于字符串数组：

$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>

这是 plunker 中的演示

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

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

更新：

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

toString: function() { return s }

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

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

这是另一个要演示的 plunker

截屏

4

2 回答 2

2

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]
        }
    }
});
于 2014-07-26T01:56:57.557 回答
1

虽然Krzysztof 的建议很有帮助，但我无法完全使用绑定，ng-list因为ng-list它将始终将对象数组转换为字符串数组，从而覆盖我在范围内拥有的任何对象。

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

我像这样实现了 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 }
];

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

Pluner 中的演示

于 2014-07-27T02:28:24.660 回答