Split a string into multiple text inputs

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!

Split the value in your controller and store each part on the model — benjrb
– benjrb, Commented Nov 28, 2016 at 14:00
Filters are for output only. You need to write a directive that uses the ngModelController — a better oliver
– a better oliver, Commented Nov 28, 2016 at 14:03
it's very easy to do it, but it's not good practice to bind a model to a run time created array element, it will be better if you do the following : var parts = stringVal.split(''); var x = parts[0], y = parts[1], z = parts[2]; and then in your inputs, bind each for it's corresponding value — xelilof
– xelilof, Commented Nov 28, 2016 at 14:08

Mistalis · Accepted Answer · 2016-11-28 14:12:47Z

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.

answered Nov 28, 2016 at 14:12

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cecilia · Accepted Answer · 2016-11-28 14:35:31Z

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>

Antonio · Accepted Answer · 2016-11-28 14:57:57Z

0

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>

edited Nov 28, 2016 at 14:57

answered Nov 28, 2016 at 14:20

Antonio

9015 silver badges12 bronze badges

Collectives™ on Stack Overflow

Split a string into multiple text inputs

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related