1

最初の入力フィールド値を 2 番目の入力フィールド値に自動入力しようとしていますが、2 番目の入力フィールドが既存の値である場合は、最初の入力フィールド値を 2 番目に追加/連結したいと考えています。

論理： 

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されます。プランカーのデモを確認してください。

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 に答える