ng-model，不在视图中显示数据答案

【问题标题】：ng-model, don't show data in viewng-model，不在视图中显示数据
【发布时间】：2017-08-09 13:28:26
【问题描述】：

我有一个案例，我在 AngularJS 中使用表单。我有单选按钮，最后一个选项始终是文本输入。它们都与同一个模型连接，因此用户使用单选按钮选择或输入文本输入的内容都会保存在模型中。

问题在于文本输入。当用户单击单选按钮时，其值显示在最后一个文本输入行。如何阻止它并仍然保持连接到相同的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>

【问题讨论】：

为什么要保持连接到 ng-model？
它是较旧的项目，后端已经完成。我需要发布相同类型的对象。
你不能将收音机的值保存在另一个模型中并将其分配给输入吗？
嗨懒鬼。对不起，我不知道你在想什么。我是 React 人，但上周被扔进了 Angular :)

标签： angularjs forms angularjs-ng-model

【解决方案1】：

您可以尝试不同的方法，如下所示：-

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>

【讨论】：

@Igro-Vuk 检查这个答案。
谢谢 Gaurav，效果很好 :) 我在同一个问题上有继续 stackoverflow.com/questions/45593041/…
@Igor-Vuk 让我也检查一下 :-)

【解决方案2】：

这个解决方案怎么样？基本上，有单选按钮。使用文本框创建一个“其他”，并且只有在您为其他输入值时才允许选择它。文本模型是不同的，但是当它被填充时，将允许您选择“其他”，它将采用文本框中的值，并将其传递给您关心的模型。

  <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

【讨论】：

嗨，布莱恩。我试过你的解决方案。这很好，但是当用户开始写检查的指示时似乎有一个错误，它需要再次单击它才能获取新值。