Question

我有一个顶点值数组，我循环并显示给用户。这些值存储为空格分隔的字符串，如下所示：

vrtx = ["10.3 20.3 10.5", "13.2 29.2 3.0", "16.3 2.3 20.2", ...]

我想为用户提供一个友好的界面来编辑值。这要求我将字符串分成三个单独的数字，并将它们分成三个单独的输入。

我想创建一个指令，因为我无法将值存储为单独的值，但在编辑完成后，我想重新加入值并更新范围以将新值存储为字符串。 / p>

这是我到目前为止的指令：

 myApp.directive('fieldValue', function () {

    return {
        scope: {
          field:'='
        },
        link: function (scope, element, attrs) {
            var fields  = scope.field.split(' ');
            element.html("<input type='number' value='"+ fields[0] +"' class='vertex-input'/><input type='number' value='"+ fields[1] +"' class='vertex-input'/><input type='number' value='"+ fields[2] +"' class='vertex-input'/>");    
        }
    }

});

这会拆分值并显示三个输入和各个值，但我的问题是如何连接这些值并将它们保存回范围？任何建议将不胜感激！ TIA

Answer 1

您可以使用格式化程序/解析器来实现您想要的效果，但您可能需要调整输入以使用ngModel，而且我不太确定如何使用3个单独的输入字段：

myApp.directive('fieldValue', function () {

    return {
        scope: {
          field:'='
        },
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            var fields  = scope.field.split(' ');
            element.html("<input type='number' value='"+ fields[0] +"' class='vertex-input'/><input type='number' value='"+ fields[1] +"' class='vertex-input'/><input type='number' value='"+ fields[2] +"' class='vertex-input'/>");

            ngModel.$formatters.push(function(value){
              //return the value as you want it displayed
            });

            ngModel.$parsers.push(function(value){
              //return the value as you want it stored
            });


        }
    }

});

在我看来，这种方式可以让您更灵活地使用您想要的任何策略。在此处阅读更多相关信息：https://alexperry.io/angularjs/2014/12/10/parsers-and-formatters-angular.html

此外，更多官方文档：https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Answer 2

我认为你的问题是this one的延续，所以我想根据你先前问题的答案，建议你一个没有指令的解决方案。

修改输入值后，调用合并所有输入的函数：

<input type="text" ng-model="arr[0]" ng-change="update()" />
<input type="text" ng-model="arr[1]" ng-change="update()" />
<input type="text" ng-model="arr[2]" ng-change="update()" />

$scope.update = function() {
    $scope.myString = $scope.arr[0] + ' ' + $scope.arr[1] + ' ' + $scope.arr[2];
}

＆＃13;

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.myString = 'My awesome text';
  $scope.arr = $scope.myString.split(/[ ]+/);

  $scope.update = function() {
    $scope.myString = $scope.arr[0] + ' ' + $scope.arr[1] + ' ' + $scope.arr[2];
  }
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <input type="text" ng-model="arr[0]" ng-change="update()" />
    <input type="text" ng-model="arr[1]" ng-change="update()" />
    <input type="text" ng-model="arr[2]" ng-change="update()" />
    <br/>Result: {{myString}}
  </div>
</div>

＆＃13;

<强> Try it on JSFiddle

使用指令显示范围值和更新范围

2 个答案: