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

Question

我有一个案例，我使用了带有 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>

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

Answer 2

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

  <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

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

ng-model, don't show data in view

forms

angularjs

angularjs-ng-model