Question

我需要一种方法让用户编辑Vertex 3D字段的值。该值存储为字符串，但我想将其显示给用户，作为三个单独的输入字段供他们编辑。

我需要一种方法来按空格分割字符串，然后在单独的输入中显示每个索引。我尝试使用这个过滤器，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

但是您无法为过滤器分配值，因此会引发错误。

实现这一目标的正确方法是什么？ TIA！

Answer 1

我建议用空格分割你的字符串并在输入中显示每个部分：

角度变量

$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

它比过滤器更好，更易读，更快：

<强>控制器：

request = new ajaxRequest()
// Calling the ajax_DB.php script
request.open("POST", "ajax_DB.php", true)
// Setting the headers
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
request.setRequestHeader("Content-length", input.length)
request.setRequestHeader("Connection", "close")

request.send(input)
// On successfull server response display the data 
request.onreadystatechange = function(event) 
{
    if (this.readyState == 4) 
    {
        if (this.status == 200) 
        {
            if (this.responseText != null) 
            {   
                // Display results if they are hidden
                display.style.display = 'block';
                // If there are results
                if (display.firstChild !== undefined) 
                {
                    // Remove them
                    while(display.firstChild)
                    {
                        display.removeChild(display.firstChild)
                    }
                }
                    // Convert the string result to an array
                    var results = this.responseText.split(',');
                    // Remove last element from the array(',')
                    results.pop();
                    // Append one 'li' element for each array element
                    for (var i = 0; i < results.length; i++) 
                    {
                        var li = document.createElement('li')
                        li.setAttribute("onclick", "setInputVal(this.innerHTML)")
                        li.setAttribute("onmouseover", setClassOnMouseOver(this))
                        li.innerHTML = results[i]
                        display.appendChild(li)
                    }   
            }
            else alert("Ajax error: No data received")
        }
        else alert("Ajax error: " + this.statusText)
    }

}

<强>模板：

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

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>

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

3 个答案: