Ronny vdb Ronny vdb - 9 months ago 61
AngularJS Question

Split a string into multiple text inputs

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 Source

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.