将字符串拆分为多个文本输入

Question

I need a way for users to edit the value of a field that is Vertex 3D. The value is stored as a string, but I want to display it to the user as three separate input fields for them to edit.

I need a way to split the string by spaces, and then show each index in a separate input. I tried doing with this a filter, like this:

 myApp.filter('split', function() { return function(input, splitChar, splitIndex) { return input.split(splitChar)[splitIndex]; } }); 

 <input type="text" ng-model="value | split:' ':0"/> <input type="text" ng-model="value | split:' ':1"/> <input type="text" ng-model="value | split:' ':2"/> 

But you cannot assign a value to a filter so it throws an error.

What would be the correct way to achieve this? TIA!

Answer 1

I would recommand to split your string by spaces and show each part in an input:

Angular variables

$scope.myString = 'My awesome text';
$scope.arr = $scope.myString.split(/[ ]+/);

HTML inputs

<input type="text" ng-model="arr[0]" />
<input type="text" ng-model="arr[1]" />
<input type="text" ng-model="arr[2]" />

---

Try it on JSFiddle .

Answer 2

It would be better, readable and faster than filters make something like this:

Controller:

...
let vertexParts = vertex.split(' ');
$scope.vertex3d = {x: vertexParts[0], y: vertexParts[1], z: vertexParts[2]};
....
$scope.saveVertex = function() {
    myVertexService.save([$scope.vertex3d.x, $scope.vertex3d.y, $scope.vertex3d.z].join(' '));
};
...

Template:

<label>
    X: <input type="text" ng-model="vertex3d.x"/>
</label>
<label>
    Y: <input type="text" ng-model="vertex3d.y"/>
</label>
<label>
    Z: <input type="text" ng-model="vertex3d.z"/>
</label>

Answer 3

You can do like this:

 var vertexApp = angular.module('vertexApp', []); vertexApp.controller('vertexCtrl', ['$scope', function ($scope) { $scope.coordsString = 'xxx yyy zzz'; $scope.coords = $scope.coordsString.split(' '); $scope.$watch('coords[0]', function () { $scope.coordsString = $scope.coords.join(' '); }); $scope.$watch('coords[1]', function () { $scope.coordsString = $scope.coords.join(' '); }); $scope.$watch('coords[2]', function () { $scope.coordsString = $scope.coords.join(' '); }); }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="vertexApp"> <div ng-controller="vertexCtrl"> <input type="text" ng-model="coords[0]" /> <input type="text" ng-model="coords[1]" /> <input type="text" ng-model="coords[2]" /> <br /> New model value: {{coordsString}} </div> </div>