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

你可以尝试这样的不同方法： -

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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

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

2 个答案: