连接径向输入和文本输入 [英] Connect radial input and text input

查看:160
本文介绍了连接径向输入和文本输入的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用径向按钮的形式,但最后一个是径向按钮和文本输入的组合。我想以某种方式连接两个输入。在点击旁边的径向按钮之前,用户不应该能够输入文本。当用户开始写文本时,我想停止径向按钮检查指示消失。

 < label class =form-check-label如果用户点击其他径向按钮, > 
< input type =radioname =religionvalue =noSayng-model =$ ctrl.diversityTest.religion>不想说
< / label>

< label class =form-check-label>
< input type =radioname =religionvalue ={{$ ctrl.diversityTest.religion}}>任何其他宗教或信仰:
< div>
请写入:< input ng-keyup =$ ctrl.diversityTest.religion = $ ctrl.diversityTest.tempclass =input-materialtype =textname =religionng-model = $ ctrl.diversityTest.temp >
< / div>
< / label>


解决方案

您可以尝试这样: -



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 =myAppng-controller =myCtrl> < label class =form-check-label> < input type =radiong-click =$ ctrl.diversityTest.temp =''; $ ctrl.diversityTest.otherReligionRadio =''; name =religionvalue =noSayng-model =$ ctrl.diversityTest.religion>不想说< / label> < label class =form-check-label> < input type =radioname =religionvalue =Other_religionng-model =$ ctrl.diversityTest.otherReligionRadio>任何其他宗教或信仰:< div>请输入:< input class =input-materialtype =textng-disabled =!($ ctrl.diversityTest.otherReligionRadio)ng-keyup =$ ctrl.diversityTest.religion = $ ctrl.diversityTest .tempname =igionng-model =$ ctrl.diversityTest.temp> < / DIV>< /标签> <峰; br>宗教:{{$ ctrl.diversityTest.religion}}< / div>  

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>

解决方案

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>

这篇关于连接径向输入和文本输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆