Wie man eine Eingabe dupliziert, wenn das Kontrollkästchen bei Angularjs aktiviert ist?

Ich versuche eine input zu duplizieren, wenn ein Kontrollkästchen aktiviert ist. Wenn nicht, dann schreibe nichts auf die zweite checkbox.Wie man eine Eingabe dupliziert, wenn das Kontrollkästchen bei Angularjs aktiviert ist?

Dies ist der Code, die Verweise auf die Elemente:

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

Auf meinem Controller ich folgendes haben die Checkbox zu initialisieren:

$scope.checkDuplicate = { 
    value1 : true 
};

Was ich zu tun bin versucht,

Wenn ein Kontrollkästchen aktiviert ist, wird der zweite Eingang automatisch vererbt ted mit dem Wert des ersten. Wenn nicht, dann ist die zweite Eingabe leer, bis der Benutzer ihr einen Wert gibt.

Ich habe zwei Probleme hier:

Zuerst ein

Wenn ich manuell true oder false eingestellt, je nach dem Zustand der Checkbox (ich meine ng-true-value="'true'" und ng-false-value="'false'") es ruft gut der Wert, den die checkbox hat.

Aber wenn ich versuche, meine input Wert wie oben gezeigt abrufen, bekomme ich einen leeren Wert (es spielt keine Rolle, ob es einen Wert hat oder nicht, es ist immer leer).

Zweite ein

Wenn ich meinen Code zu setzen, wie ich darüber nur den Wert gezeigt haben, erstmals wird (wenn die Seite geladen wird), aber nicht die folgenden Zeiten, die ich ändern Sie den checkbox Wert.

Trotzdem, wenn ich versuche, den Wert aus dem input Wert abrufen, kann ich den Wert des Kontrollkästchens richtig abrufen. Ich meine, wenn ich <span>{{checkDuplicate.value1}}</span> mache, wird es richtig gezeigt.

Ich habe versucht mit ng-change aber ohne Erfolg.

Wie kann ich diese Fehler beheben oder wie kann ich meine input ordnungsgemäß duplizieren, wenn checkbox überprüft wird?

Vielen Dank im Voraus!

Quelle

2017-06-13 Francisco Romero

Was ist Ihr Anliegen? Wenn das Kontrollkästchen aktiviert ist, sollte eine dynamische Eingabe hinzugefügt werden. –

@RohanKawade Nein, ich meine, wenn ein Kontrollkästchen aktiviert ist, wird die zweite Eingabe automatisch mit dem Wert der ersten abgeschlossen. Wenn nicht, dann ist die zweite Eingabe leer, bis der Benutzer ihr einen Wert gibt. Jetzt werde ich diese Information der Frage hinzufügen, um klarer zu sein. –

Sie können die Variable ändern, um die Eingabe zu verfolgen oder nicht. Es gibt ein funktionierendes Beispiel.

Erklärung

änderte ich die Kontrollkästchen ng-true-value und ng-false-value es uns einen Variablennamen Hexe gibt Ihnen in ng-model von ownerName input verwenden. Dann änderte ich doppelte Eingaben ng-model Variable. Es ändert sich , das von Checkboxes Wert abhängt.Wenn Checkbox aktiviert wird verfolgt $scope.inputs.name, wenn es nicht $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>

Quelle

2017-06-13 11:24:44

Also wenn ich einen 'input' Wert ändern möchte ... Sollte ich es auf dem' $ scope' deklarieren um es ändern zu können? –

Sie deklarieren dies bereits im Bereich. Nennen Sie es einfach und verwenden Sie es nach Name, um es zu referieren –

@ Error404 Ich bearbeitete die Antwort zu verfolgen Eingabe nicht seinen Wert –

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

ein Click-Ereignis ist In das Kontrollkästchen.

Zuordnen des ng-Modells zum zweiten Eingang.

jetzt in der Steuerung

 $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=""; 
       } 

     }

Quelle

2017-06-13 11:44:52 himanshu

Wie man eine Eingabe dupliziert, wenn das Kontrollkästchen bei Angularjs aktiviert ist?

Antwort

Verwandte Themen