Controlling Inputfields with radio buttons in AngularJS

Question

I have the following idea. My view contains 3 input fields and radio buttons which need to work each other.

Firstly when the view is displayed you can see the input fields only. If the user clicks on one of the input fields the other fields disabled and the radio buttons to this input fields are showing. If the user want to use an other input field of these three then he needs to click on one of the radio buttons then the other two input field will disabled.

Here is the currently code:

...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = !disabled" ng-disabled="..." />
<input type="radio" class="radio" ng-hide="!disabled" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = !disabled" ng-disabled="disabled" />
<input type="radio" class="radio" ng-hide="!disabled" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = !disabled" ng-disabled="disabled" />
<input type="radio" class="radio" ng-hide="!disabled" />

How can I realise that? Currently the first input field works.

you want the text input disabled or disappeared?

harrrrrrry
– harrrrrrry

2015-05-11 15:21:59 +00:00
Commented May 11, 2015 at 15:21 — harrrrrrry
– harrrrrrry, Commented May 11, 2015 at 15:21

harrrrrrry · Accepted Answer · 2015-05-11 15:28:49Z

2

Try to give a value to disabled

...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = 1" ng-disabled="disabled!=1" />
<input type="radio" class="radio" ng-hide="disabled==1" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = 2" ng-disabled="disabled!=2" />
<input type="radio" class="radio" ng-hide="disabled==2" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = 3" ng-disabled="disabled!=3" />
<input type="radio" class="radio" ng-hide="disabled==3" />

answered May 11, 2015 at 15:28

harrrrrrry

14.7k2 gold badges27 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Reto · Accepted Answer · 2015-05-11 15:28:49Z

1

this can certainly work, just make sure you are using different $scope variables for each control:

<input type="text" name="Id" ng-model="search.id" ng-click="disabledId = !disabledId" ng-disabled="disabledId" />
<input type="radio" class="radio" ng-show="disabledId" ng-click="disabledName = true; disabledId=false; disabledAge=true"/>
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabledName = !disabledName" ng-disabled="disabledName" />
<input type="radio" class="radio" ng-show="disabledName" ng-click="disabledName = false; disabledId=true; disabledAge=true"/>
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabledAge = !disabledAge" ng-disabled="disabledAge" />
<input type="radio" class="radio" ng-show="disabledAge" ng-click="disabledAge=false; disabledId = true; disabledName=true"/>

While this should work here, I recommend not to put so much JS-code into the HTML, better would be to add a method on $scope like $scope.radioClicked(buttonId) and then call this method on ng-click.

Also using ng-show instead of ng-hide helps readability - no double negation.

answered May 11, 2015 at 15:28

Reto

3,1631 gold badge24 silver badges33 bronze badges

3 Comments

yuro Over a year ago

Do you think a switch-statement would be useful?

Reto Over a year ago

Well, does this solution work? If not,what is the problem? Why are you asking about a switch statement- (sure, you could use one, there are dozens of ways to do this)

yuro Over a year ago

Because I have edited my form and using a method called disabled(). Now the disabled-method send an item for each input field. In my example the numbers 1,2 and 3. In my Controller is the disabled()-method and the item will checked with a switch statement. case 1: $scope.disabledId = false; $scope.disabledName = true; $scope.disabledAge = true; ... and so on. Is this a good solution?

yuro · Accepted Answer · 2015-05-11 15:31:05Z

0

I've changed my input fields. It is a possible solution but only I need the interaction with radio buttons and the input fields.

<input type="text" name="Id" ng-model="search.id" ng-click="nameDis = !nameDis;ageDis = !ageDis" ng-disabled="idDis" />
<input type="radio" class="radio" ng-hide="!idDis" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="idDis = !idDis;ageDis = !ageDis" ng-disabled="nameDis" />
<input type="radio" class="radio" ng-hide="!nameDis" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="nameDis = !nameDis;idDis = !idDis" ng-disabled="ageDis" />
<input type="radio" class="radio" ng-hide="!ageDis" />

answered May 11, 2015 at 15:31

yuro

2,2296 gold badges43 silver badges79 bronze badges

Collectives™ on Stack Overflow

Controlling Inputfields with radio buttons in AngularJS

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related