ng-Modell, zeige keine Daten in Sicht

Ich habe einen Fall, wo ich ein Formular mit AngularJS verwende. Ich habe Radiobuttons und die letzte Option ist immer Texteingabe. Alle von ihnen sind mit dem gleichen Modell verbunden, also was auch immer Benutzer mit Radioknöpfen wählt oder Texteingabe eingibt, wird im Modell gespeichert.ng-Modell, zeige keine Daten in Sicht

Das Problem ist mit der Texteingabe. Wenn ein Benutzer auf das Optionsfeld klickt, wird sein Wert in der letzten Texteingabezeile angezeigt. Wie höre ich das auf und verbinde es immer noch mit demselben ng-model?

<label class="form-check-label"> 
    <input class="form-check-input" type="radio" name="religion" value="sikhizm" ng-model="$ctrl.diversityTest.religion">Sikhizm 
</label> 

<label class="form-check-label"> 
    <input class="form-check-input" type="radio" name="religion" value="catholic" ng-model="$ctrl.diversityTest.religion">Catholic 
</label> 
... 

<div class="mtl-20"> 
    Please write in: <input class="input-material" type="text" name="religion" ng-model="$ctrl.diversityTest.religion" > 
</div>

Quelle

2017-08-09 Igor-Vuk

warum tun Sie behalten möchten es ng-Modell angeschlossen? –

es ist älteres Projekt und Backend ist bereits fertig. Ich muss den gleichen Objekttyp POST. –

Können Sie den Wert des Radios nicht in einem anderen Modell speichern und der Eingabe zuweisen? – anu

Sie können einen anderen Ansatz, wie diese versuchen: -

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
$scope.$ctrl = {}; 
 
$scope.$ctrl.diversityTest = {}; 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    
 
<label class="form-check-label"> 
 
    <input class="form-check-input" type="radio" name="religion" value="sikhizm" ng-model="$ctrl.diversityTest.religion">Sikhizm 
 
</label> 
 

 
<label class="form-check-label"> 
 
    <input class="form-check-input" type="radio" name="religion" value="catholic" ng-model="$ctrl.diversityTest.religion">Catholic 
 
</label> 
 
... 
 

 
<div class="mtl-20"> 
 
    Please write in: <input ng-keyup="$ctrl.diversityTest.religion = $ctrl.diversityTest.temp" class="input-material" type="text" name="religion" ng-model="$ctrl.diversityTest.temp" > 
 
</div> 
 

 
<br> 
 
This is religion model value : {{$ctrl.diversityTest.religion}} 
 
</div>

Quelle

2017-08-09 13:30:14

@ Igro-Vuk überprüfen Sie diese Antwort. –

Danke Gaurav, das hat ziemlich gut funktioniert :) Ich habe eine Fortsetzung auf die gleiche Frage https://StackOverflow.com/Questions/45593041/connect-radial-input-and-text-input –

@ Igor-Vuk lassen Sie mich überprüfen das auch :-) –

Wie wäre das für eine Lösung? Grundsätzlich haben die Radio-Buttons. Erstellen Sie ein "Anderes" mit einem Textfeld und lassen Sie es nur dann zu, wenn Sie einen Wert für "Andere" eingeben. Das Textmodell ist anders, aber wenn es ausgefüllt ist, können Sie "Andere" auswählen, was den Wert dessen annimmt, was in der Textbox ist, und es an das Modell übergeben, das Ihnen wichtig ist.

<label class="form-check-label"> 
    <input class="form-check-input" type="radio" name="religion" value="{{ textValue }}" 
    ng-disabled="!textValue && !(textValue.length > 5)" 
    ng-model="diversityTest.religion"> 

    Other 

    <input class="input-material" type="text" name="religion" ng-model="textValue"> 
    </label>

http://plnkr.co/edit/f9lzNLhZuy0c7BI2kE2A?p=preview

Quelle

2017-08-09 13:47:43 Brian

Hallo Brian. Ich habe deine Lösung versucht. Es ist ziemlich gut, aber es scheint einen Fehler zu geben, wenn der Benutzer beim Schreiben der überprüften Anzeige einen Fehler meldet und es erneut klicken muss, um den neuen Wert zu erhalten. –

ng-Modell, zeige keine Daten in Sicht

Antwort

Verwandte Themen