连接径向输入和文本输入

Question

我有带径向按钮的表单，但最后一个是径向按钮和文本输入的组合。我想以某种方式连接两个输入。在单击旁边的圆形按钮之前，用户不应该能够输入文本。此外，当用户开始写文本时，我想阻止径向按钮选中的指示消失。如果用户单击其他一些圆形按钮，文本字段应该自行清空。

<label class="form-check-label">
  <input type="radio" name="religion" value="noSay" ng-model="$ctrl.diversityTest.religion">Prefer not to say
</label>

<label class="form-check-label">
  <input type="radio" name="religion" value="{{$ctrl.diversityTest.religion}}"> Any other religion or beliefe:
  <div>
     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>
</label>

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 type="radio"  ng-click="$ctrl.diversityTest.temp='';$ctrl.diversityTest.otherReligionRadio='';" name="religion" value="noSay" ng-model="$ctrl.diversityTest.religion">Prefer not to say
</label>

    <label class="form-check-label">
  <input type="radio" name="religion" value="Other_religion" ng-model="$ctrl.diversityTest.otherReligionRadio" > Any other religion or beliefe:
  <div>
     Please write in: <input class="input-material" type="text" ng-disabled="!($ctrl.diversityTest.otherReligionRadio)" ng-keyup="$ctrl.diversityTest.religion = $ctrl.diversityTest.temp"  name="religion" ng-model="$ctrl.diversityTest.temp">
  </div>
</label>

    <br> Religion : {{$ctrl.diversityTest.religion}}
  </div>

连接径向输入和文本输入

Connect radial input and text input

forms

angularjs

angularjs-ng-model