Angularjsでチェックボックスをオンにしたときに入力を複製する方法は？

チェックボックスをオンにした場合、inputを複製しようとしています。そうでなければ、次にcheckboxに何も書き込まないでください。Angularjsでチェックボックスをオンにしたときに入力を複製する方法は？

これは、それらの要素への参照コードです：私は、チェックボックスを初期化するために、以下のいる

<form name="myCustomForm"> 
    <input type="checkbox" ng-model="checkDuplicate.value1" ng-true-value="{{myCustomForm.ownerName.$viewValue}}" ng-false-value="''"/> 
    <input ng-model="ownerName" placeholder="Enter your name..." name="ownerName" id="ownerName" disabled> 
    <input ng-value="{{checkDuplicate.value1}}" placeholder="Enter the name of the house in which you live..." name="houseOwnerName" required> 
</form>

私のコントローラの場合：

$scope.checkDuplicate = { 
    value1 : true 
};

私はを行うにしようとしていますどのような

チェックボックスがオンの場合、2番目の入力はオートコンプリートになります最初のものの価値と結びついている。そうでない場合、ユーザが何らかの値を与えるまで、2番目の入力は空になります。

私はここに二つの問題があります：私は（私はng-true-value="'true'"とng-false-value="'false'"を意味する）のチェックボックスの状態に応じて手動でtrueまたはfalseを設定した場合、それは取得

第1

をよくcheckboxが持っている値。

上記のようにinputの値を取得しようとすると、空の値が得られます（値があるかどうかは関係ありませんが、常に空です）。

2つ目

私はcheckbox値を変更するには、次の時間を、私はその上に示されたようにのみ（ページがロードされる）値最初の時刻を取得します私のコードを置くが、そうでない場合。

しかし、inputの値から値を取得しようとすると、チェックボックスの値を正しく取得できます。つまり、私がすれば<span>{{checkDuplicate.value1}}</span>が正しく表示されます。

私はng-changeを使用しようとしましたが、成功しませんでした。

checkboxをチェックすると、これらのエラーを解決する方法、またはinputを適切な方法で複製するにはどうすればよいですか？

ありがとうございます！

出典

2017-06-13 Francisco Romero

あなたの関心事は何ですか？チェックボックスをオンにすると、動的に入力を追加する必要がありますか？ –

@RohanKawadeいいえ、チェックボックスをオンにすると、2番目の入力が最初の値で自動完成します。そうでない場合、ユーザが何らかの値を与えるまで、2番目の入力は空になります。今私はこの情報を質問に追加して、より明確にします。 –

変数を入力を追跡するように変更できます。実際の例があります。

説明私はそれが私たちにあなたがownerName inputのng-modelで使用している変数名の魔女を与えているng-true-valueとng-false-valueチェックボックスを変更しました。次に、重複入力を変更しましたng-model変数。チェックボックス値の値を変更すると、が変更されています。チェックボックスがチェックされている場合は、チェックボックスにクリックイベントを追加$scope.inputs.text

var app = angular.module("app",[]); app.controller("ctrl", function($scope){ $scope.inputs = {}; $scope.checkDuplicate = { value1 : 'text' }; })

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body ng-app="app" ng-controller="ctrl" > <form name="myCustomForm"> <input type="checkbox" ng-model="checkDuplicate.value1" ng-true-value="name" ng-false-value="text"/> <input ng-model="inputs.name" placeholder="Enter your name..." name="ownerName" id="ownerName" > <input ng-model="inputs[checkDuplicate.value1]" placeholder="Enter the name of the house in which you live..." name="houseOwnerName" required> </form> </body> </html>

出典

2017-06-13 11:24:44

それで 'input'の値を変更したいのですが...' $ scope'で宣言すれば変更できますか？ –

すでにスコープで宣言しています。名前をつけてそれを参照するために名前で使用してください。 –

@ Error404私はその値ではなく入力を追跡する答えを編集しました –

<form name="myCustomForm"> 
    <input type="checkbox" ng-model="checkDuplicate.value1" ng-true-value=" 
     {{myCustomForm.ownerName.$viewValue}}" ng-false-value="''" 
      ng-click="updateOwnerName()"/> 
    <input ng-model="ownerName" placeholder="Enter your name..." 
     name="ownerName" id="ownerName" disabled> 
    <input ng-model="houseOwnerName" ng-value="{{checkDuplicate.value1}}" 
     placeholder="Enter the name of the house in which you live..." 
     name="houseOwnerName" required>

でない場合には、$scope.inputs.nameを追跡しています。

2番目の入力にng-modelを割り当てます。

コントローラで今

 $scope.checkDuplicate = { 
      value1 : false 
     }; 

    $scope.updateOwnerName=function(){ 
     // write your auto complete logic here 
     // let the value to be displayed in 2nd input is "MARS" 
      if(checkDuplicate.value1){ 
       $scope.houseOwnerName="MARS"; 
       } 
      else{ 
       $scope.houseOwnerName=""; 
       } 

     }

出典

2017-06-13 11:44:52 himanshu

Angularjsでチェックボックスをオンにしたときに入力を複製する方法は？

答えて

関連する問題