Question

我有两个输入框，需要将第一个输入框的值连接到另一个输入框的第二个输入框。

问题我在使用ng-blur时遇到这个问题，它会多次执行多次模糊功能。我添加了ng-blur的计数，只有第一次模糊的条件，它工作。

我觉得它不是一种有效的方法。还有其他办法吗？

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.1/angular.js" data-semver="1.4.1"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<input placeholder="sample" ng-model="input1"> 
 <input ng-blur="counting(input2)" placeholder="sample" ng-model="input2"> 
count : {{count}}
</body>
</html>

控制器

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
 $scope.name = 'World';
 $scope.count =0;
 $scope.counting = function(value){

 if($scope.count===0)
 {
    if($scope.input1 && $scope.input2){
       var val1=$scope.input1;
       var val2=$scope.input2;
       $scope.input2=val1+val2;
     }
   }
   $scope.count++;

  }
 });

请参阅Plunkr

Answer 1

使用以下内容：Plnkr

<input ng-change="counting(input2)"placeholder="sample" ng-model="input2" ng-model-options="{ debounce: 500 }">

在没有打字半秒后会触发，导致现在ng-change开火：

$scope.counting = function(value){
 $scope.input2= $scope.input1 + $scope.input2;
}

修改如果关注Alvin的评论，你可以通过以下方式破解它：

$scope.counting = function(value){ $scope.input2= $scope.input2.replace($scope.input1,''); $scope.input2= $scope.input1 + $scope.input2; }

Answer 2

由于这很可能是所需的行为（请更具体），最好在退出第二个输入时附加第一个输入的内容并删除再次输入第二个输入时附加的内容。

重要 - 一般的经验法则是，如果在输入元素中使用ng-model，请确保您引用的变量中包含一个点。这个奇怪的声音规则是由于一个令人讨厌但常见的问题，涉及在角度1中自动生成的子范围。我已经修改了代码以解释它：

...

<input placeholder="sample" ng-model="inputs.input1">
<input ng-blur="appendText()"
       ng-focus="restoreOriginalText()"
       placeholder="sample"
       ng-model="inputs.input2">

...

app.controller('MainCtrl', function($scope) {
  $scope.inputs = {
    input1: '',
    input2: ''
  };
  $scope.name = 'World'; // not used
  $scope.originalText = $scope.inputs.input2;

  $scope.appendText = function () {
    $scope.originalText = $scope.inputs.input2;
    $scope.inputs.input2 = $scope.inputs.input1 + $scope.inputs.input2;
  }

  $scope.restoreOriginalText = function () {
    $scope.inputs.input2 = $scope.originalText;
  }

});

Answer 3

AngularJS处理表单的方式非常简单。

做这样的事情 -

查看

<form name="myForm"> <input name="input1" placeholder="sample" ng-model="input1"> <input name="input2" ng-blur="updateValue()" placeholder="sample" ng-model="input2"> </form>

<强>控制器

app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.updateValue = function(){ alert($scope.myForm.input2.$dirty); // If input2 is dirty that means user has // interected with that field concatenate value if($scope.myForm.input2.$dirty){ $scope.input2 = $scope.input1 +""+ $scope.input2; // Set input2 to pristine so now on blur // it will not execute it again $scope.myForm.input2.$setPristine(); } } });

请参阅此更新plunker希望它能为您提供帮助。

P.S。 - 改变input2后，一旦调用blur函数但它不会再次连接，但如果用户现在再次更改input2，那么连接将再次发生，你必须分别处理这个问题。我的建议是在更改一次值后禁用input2。

AngularJS只调用一次ng-blur

3 个答案: