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

Solution 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

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

---

Try it on JSFiddle.

Solution 2:

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(' ');
    });
}]);

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

Solution 3:

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: <inputtype="text"ng-model="vertex3d.x"/></label><label>
    Y: <inputtype="text"ng-model="vertex3d.y"/></label><label>
    Z: <inputtype="text"ng-model="vertex3d.z"/></label>