1つの入力フィールド値を角型の別のフィールドに連結（追加）

最初の入力フィールド値を2番目の入力フィールド値に自動入力しようとしていますが、2番目の入力フィールドを既存の値として追加/最初のフィールド値を秒に入力します。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); 

}]);

plunker

更新（問題）：

オーナーフィールドに「Jake」と入力すると、メンバーフィールドに「Jake,Jak,Ja,J」という文字が印刷されます。メンバーフィールドに既存の値Adamがある場合、所有者フィールドにTomと入力すると、メンバーフィールドにTom,To,T,Adamが作成されます。デモのためにプランナーをチェックしてください。

出典

2016-03-31 Mad-D

...とそのコードが動作しませんか？どのように動作していないのですか？エラーが出ていますか？予想される入出力は何ですか？ –

それは働いています。どうしたの？ –

これをしないでください。コード通りに動作します。 UIは、完全に救済できません。（フィールド2を塗りつぶした後に、フィールド1の入力ミスに気づき、それを修正するために戻ってきますか？）ユーザーが変更することのできない、画面上の変更可能なスペースがあれば、3番目のフィールドに連結します。 –

-1

$ scope.owner、$ scope.memberを表示する3番目の読み取り専用のテキストボックスまたはラベルがないのはなぜですか。

出典

2016-03-31 20:05:42 Austin

私はこれがコメント –

Mad-Dは、ng-modelの仕組みに基づいて循環依存する傾向があるため、アプローチを変更することを検討してください。

すでに両方の値にアクセスしており、他の方法で表示することができます。プラス、あなたのコントローラがきれいに見えると本当のビューモデル（VM）として機能：

Plunker

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

    var myCtrl = this; 

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

});

出典

2016-03-31 20:29:39

あなたの入力のためにありがとうと思います。しかし、ユーザーは 'member'入力フィールドの中に' owner'値を自動入力する必要があります。 –

私は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-31 20:46:18 Roy

1つの入力フィールド値を角型の別のフィールドに連結（追加）

答えて

関連する問題