在angularJS中使用split(）时无法编辑输入

Unable to edit Input when using split() in angularJS

本文关键字：编辑 输入 angularJS split      更新时间：2023-09-26

我有一个嵌套的JSON对象，其中有一个属性的数组。数组项具有"；"。

我试图实现的是治疗"；"作为分隔符，然后进一步拆分数组项以进行更改。

一旦做出了更改，就和以前一样加入它们。问题是，我可以根据这个分隔符拆分数组项，但无法编辑它。我的JSON:

{
    name:"test1",
    xdata:["1;2;3","abhsad"]
}

下面是plunker：http://plnkr.co/edit/VYTQ6jvJ1bCKosRXh2Nt?p=preview

这会有点棘手，但这仍然是可能的。您将需要两个ngRepeat循环，其中很少有ngInit/ngChange操作来初始化和更新内容：

angular.module('demo', []).controller('DemoController', Ctrl);
function Ctrl($scope) {
  $scope.group = {
    name: "test1",
    xdata: ["1;2;3", "abhsad"]
  }
}
<script src="//code.angularjs.org/1.5.5/angular.min.js"></script>
<div ng-app="demo" ng-controller="DemoController">
  <div ng-repeat="(i, val) in group.xdata track by $index" 
       ng-init="parts = val.split(';')">
    
    <input type="text" 
           ng-model="part" 
           ng-repeat="(j, part) in parts track by $index" 
           ng-change="parts[j] = part; group.xdata[i] = parts.join(';')">
  </div>
  <pre>group = {{group | json}}</pre>
</div>

您必须为每个拆分的值创建模型，然后在更改文本框中的值时更新相应的模型，然后您可以编写一个更新xData值的函数。

这是一个样品http://plnkr.co/edit/0Rvi59pJJwwaw4zBMDD3?p=preview

相关文章：