ng模型，不顯示數據在視圖

我有一個情況，我使用AngularJS的形式。我有單選按鈕，最後一個選項始終是文本輸入。所有這些都與相同的型號連接，因此用戶使用單選按鈕選擇或在文本輸入中輸入的內容將保存在模型中。ng模型，不顯示數據在視圖

問題在於文本輸入。當用戶單擊單選按鈕時，其值將顯示在最後一個文本輸入行中。如何停止並仍然保持連接到相同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>

來源

2017-08-09 Igor-Vuk

你爲什麼要保留它連接到NG-模式？ –

它是較舊的項目，後端已完成。我需要發佈相同類型的對象。 –

你不能在另一個模型中保持無線電的價值，並將其分配給輸入？ – anu

你可以嘗試這樣一種不同的方法： -

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>

來源

2017-08-09 13:30:14

@ Igro-Vuk檢查這個答案。 –

謝謝高拉夫，這工作很不錯:)我有一個相同的問題延續 https://stackoverflow.com/questions/45593041/connect-radial-input-and-text-input –

@ Igor-Vuk讓我檢查那也是:-) –

這個怎麼樣的解決方案？基本上，有單選按鈕。使用文本框創建一個「其他」，並且只有在爲其他人輸入值時才允許選擇它。文本模型是不同的，但是當它被填充時，將允許您選擇「其他」，它將採用文本框中的內容的值，並將其傳遞給您關心的模型。

<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

來源

2017-08-09 13:47:43 Brian

嗨布賴恩。我試過你的解決方案。這很不錯，但是當用戶開始寫入選中的指示時會出現錯誤，並且需要再次單擊它以獲取新值。 –

ng模型，不顯示數據在視圖

回答

相關問題