以角度形式将一个输入字段值连接（附加）到另一个字段答案

【问题标题】：Concatenate (append) one input field value to another field in angular form以角度形式将一个输入字段值连接（附加）到另一个字段
【发布时间】：2016-07-20 10:38:32
【问题描述】：

尝试将第一个输入字段值自动填充到第二个输入字段值中，但是如果第二个输入字段作为现有值，那么我想将第一个输入字段值附加/连接到第二个。

逻辑：

if ( second ){
second = first + second;
}else{
second = first;
}

html:

<input type='text' ng-model='owner' required class="form-control">
<input type='text' ng-model='member' required class="form-control">

代码：

app.controller("Controller", ['$scope', function($scope){

  $scope.$watch(function () {
    return $scope.owner;
},
function (newValue, oldValue) {
    if ( $scope.member ){
      $scope.member = $scope.owner + ',' + $scope.member;
    }else{
      $scope.member = newValue;
    }
}, true);

}]);

plunker

更新（问题）：

当我在所有者字段中键入Jake 时，它会循环遍历字母并在成员字段中打印为Jake,Jak,Ja,J。如果我在成员字段中有预先存在的值Adam，则在所有者字段中输入Tom 后，它将在成员字段中创建Tom,To,T,Adam。请查看 plunker 进行演示。

【问题讨论】：

...该代码不起作用吗？它怎么不工作？你有错误吗？预期的输入/输出是什么？
它正在工作。怎么了？
不要这样做。就代码而言，它会正常工作。 UI 方面，它是完全无法挽救的。（如果我填写了字段 2，然后注意到字段 1 中有错字，然后返回更正它会发生什么？）将这些值连接到屏幕上的第三个、用户不可直接修改的空间（如果有的话）。跨度>
你检查我的答案了吗？任何回应都会很好。谢谢！

标签： javascript angularjs forms angularjs-directive angularjs-ng-form

【解决方案1】：

Mad-D 考虑改变你的方法，因为它很容易基于 ng-model 的工作方式产生循环依赖。

您已经可以访问这两个值，并且可以以其他方式显示它。此外，您的控制器看起来更干净，并且可以作为真正的视图模型 (vm)：

Plunker

app.controller("Controller",  function(){

  var myCtrl = this;

  myCtrl.owner = "";
  myCtrl.member = "";

});

【讨论】：

感谢您的意见。但是用户需要在member 输入字段中自动填充owner 值。

【解决方案2】：

我创建了一个plnkr .并在下面给出。检查它是否适合您。

var app = angular.module('form-example1', []);

app.controller("Controller", ['$scope', function($scope){
  $scope.permaMember = $scope.member?$scope.member:'';
  $scope.editSecond = function(member){
      $scope.permaMember = member?member:'';
  }
  $scope.editFirst = function(owner){
    if(owner){
      $scope.member = $scope.permaMember + owner
    }
    else{
      $scope.member = $scope.permaMember
    }
  }
}]);

<!doctype html>
<html ng-app="form-example1">
  <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
  <body>

<div ng-controller="Controller">
  <form name="testform">
  <div class='form-group'>
   <label>Owner</label>
  <input type='text' ng-model='owner' required class="form-control" ng-change="editFirst(owner)">
 </div>


 <div class='form-group'>
    <label>Member</label>
     <input type='text' ng-model='member' required class="form-control" ng-change="editSecond(member)">
 </div>
 <button ng-disabled="testform.$invalid" ng-click ="submit()">SAVE</button>
</form>
</div>
  </body>
</html>

【讨论】：

【解决方案3】：

为什么不使用第三个只读文本框或标签来显示 $scope.owner、$scope.member？

【讨论】：

我觉得应该是评论