文字列を複数のテキスト入力に分割する

Question

ユーザーがVertex 3Dのフィールドの値を編集する方法が必要です。 値は文字列として保存されますが、編集するための3つの入力フィールドとしてユーザーに表示したいとします。

文字列をスペースで分割し、各インデックスを別々の入力に表示する方法が必要です。私はこのように、これでフィルタをやってみました：

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"/>

しかし、それはエラーがスローされますので、あなたは、フィルタに値を割り当てることはできません。

これを達成する正しい方法は何でしょうか？ TIA！

Answer 1

私は、スペースで、あなたの文字列を分割し、入力の各パーツを表示するためにrecommandう：

角度変数

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

HTML入力

<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

それは良いだろうが、読みやすく、フィルタよりも高速では、このようなものを作る：

コントローラー：

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

テンプレート：あなたはこのよう

<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

行うことができます：

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>