Connect radial input and text input

问题

I have form with radial buttons but the last one is a combination of radial button and text input. I want to somehow connect the two inputs. User should not be able to input the text before clicking the radial button next to it. Also when user starts to write text I wanna stop the radial button checked indication from disappearing. If user clicks some other radial button the text field should empty itself.

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

回答1:

You can try like this:-

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>

来源：https://stackoverflow.com/questions/45593041/connect-radial-input-and-text-input

标签

angularjs

forms

angularjs-ng-model