Question

到目前为止，我试图完成以下任务。

我有一个以分号分隔的字符串。说一个电子邮件列表，所以

'email1@example.com;email2@example.com;email3@example.com'

我想要完成的是将此字符串（使用split（';'））拆分为字符串数组或对象数组（以帮助绑定）。我想要绑定到不同输入元素的每个项目。编辑后我想再次读取连接值以发送到我的后端。

问题是当编辑其中一个分割输入时，原始项目值不会更新（这是有道理的，因为我猜测单个项目是原始部分的副本），但我想知道是否有办法做那样的事。请注意，我希望这两种方式都可以，因此观察单个输入并手动更新原始输入只会触发无限循环的更新。

我尝试了几种不同的方法，包括使用Object.defineProperty创建一个item属性get / set以及字符串的右边（set永远不会被触发）。

take a look at this plnker

Answer 1

您可以在每个字段更新上构造一个临时数组，以便使用新值替换旧段的字符串。为了解决丢失的焦点问题，您将不得不使用ngReapeat的track by $index。除非将分隔符添加到原始字符串，否则不会重新创建内部数组。

以下是complete solution on Plunker

Answer 2

您的主要问题是重复输入元素的ng-model属性。我首先要使用ng-repeat的{{1}}变量来正确绑定$index。在原始的Plunker'名称'中 NOT 您可以绑定的范围属性，因此应将其更改为ng-model

Here是一个反映这一点的傻瓜。为了清晰起见，我做了很多改动，并有一个有效的例子。

注意：您会发现，当编辑直接绑定到转发器的字段时，每次更改都会触发ng-model="names[$index]"，并且您重复的$digest元素会刷新。所以下一个要解决的问题是在发生这种情况后重新关注正在编辑的元素。对此有很多解决方案，但这应该在另一个问题中回答。

Answer 3

虽然不鼓励绑定到字符串原语，但您可以尝试ng-list。

<form name="graddiv" ng-controller="Ctrl">
  List: <input name="namesInput" ng-list ng-model="vm.names"/>
  <ul>
    <input ng-repeat="name in vm.names track by $index" ng-model="name" ng-change="updateMe($index, name)"/>
  </ul>

由于原始字符串绑定，你需要跟踪$ index和ng-change处理程序。

function Ctrl($scope) {
  $scope.vm = {}; // objref so we can retain names ref binding
  $scope.vm.names = ['Christian', 'Jason Miller', 'Judy Dobry', 'Bijal Shah', 'Duyun Chen', 'Marvin Plettner', 'Sio Cheang', 'Patrick McMahon', 'Chuen Wing Chan'];
  $scope.updateMe = function($index, value){
    // ng quirk - unfortunately we need to create a new array instance to get the formatters to run
    // see http://stackoverflow.com/questions/15590140/ng-list-input-not-updating-when-adding-items-to-array
    $scope.vm.names[$index] = value; // unfortunately, this will regenerate the input
    $scope.vm.names = angular.copy($scope.vm.names); // create a new array instance to run the ng-list formatters
  };
}

这是您更新的plunkr

使用AngularJS中的多个输入字段编辑分隔的字符串

3 个答案: