1

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

逻辑： 

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);

}]);

笨蛋

更新（问题）：

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

4

3 回答 3

1

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

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

普朗克

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

  var myCtrl = this;

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

});
于 2016-03-31T20:29:39.023 回答
0

我创建了一个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>

于 2016-03-31T20:46:18.093 回答
-1

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

于 2016-03-31T20:05:42.830 回答