0

All of the examples I have found show the radio button group being built by some for item in items loop but none of them show a simple accessing of the radio button group array in the angularjs controller. What I need to do is traverse through the button group array to see if any of them are in "selected" state.

var radioSelected = false;

for(var i =0; i < items.length; i++) {
  if(items[i].selected) {
     radioSelected = true;
  }
}

I have tried binding to the ng-model and accessing it .. I have tried using $scope.ButtonGroupName Nothing yeilds an array that I can traverse with a loop. Any suggestions on how to do this once VERY simple activity would be greatly appreciated.

Gotta love being forced to relearn web development because somebody broke out a new shiney hammer.

Improve this question
9
  • I don't understand what is the array you're talking about. There is no array associated with a radio input, only a single value. Commented May 15, 2014 at 19:34
  • The buttonGroup array that holds all of the radiobuttons. Commented May 15, 2014 at 19:37
  • Nobody forces you to use any new shiny hammer. You can keep using your old rusty one and it will still work as usual. (And I will keep enjoying all the goodies my new shiny hammer brings for me.) :) Commented May 15, 2014 at 19:40
  • The question is not what array you want to traverse, but what exactly are yu trying to achieve here. Whatever it is there is probably some easier way to achieve it. Commented May 15, 2014 at 19:41
  • Umm no, I can't keep my old hammer. I could have completed the work I have to do in a day but instead I'll struggle for two weeks to get angular running on the page because it's what I am getting paid to do. Having said that I'm not sure how else to word my desired activity. I have a group of radio buttons.. I need to traverse them to see if any of them have been selected.... I need to do this inside the controller .. I have tried setting the ng-model to be formName.myButtons then accessing it using $scope.formName.myButtons but evidently that's not an array.. Commented May 15, 2014 at 19:44

1 Answer 1

Reset to default
2

You would not traverse the DOM elements. You would use the same ng-model for all the radio elements, and that would be updated whenever you change the selected state of the radio button.

<input type="radio" ng-model="assignedValue" name="myRadio" value="one">
<input type="radio" ng-model="assignedValue" name="myRadio" value="two">
<input type="radio" ng-model="assignedValue" name="myRadio" value="three">

You would $watch the $scope.assignedValue for changes instead of traversing the DOM elements. 

$scope.$watch('assignedValue', function (newValue, oldValue) {
  ..do stuff here
});

See here for documentation: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

The reason you don't traverse the DOM is because it's constantly changing. The whole point of Angular is to work off of data and not the elements themselves.

Update: Based on your comments, it sounds like only want to execute an action if a radio button has been selected.

First, a radio button should always have a selected state. Let's pretend it doesn't though. You can enable / disable / show / hide elements in angular in a couple of ways without writing additional DOM manipulation code.

Taking the example above, this button will only be enabled if the assignedValue is two.

<button ng-disabled="assignedValue != 'two'">My button</button>

You can also conditionally include content using ng-if:

<div ng-if="assignedValue == 'two'>
  My conditional content
</div>

This will also work with ng-switch

<div ng-switch on="assignedValue">
    <div ng-switch-when="two">My additional content</div>

    <div ng-switch-default>Here's switch fallback content</div>
</div>
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Heres a basic fiddle I was working on, but it is basically demonstrating the same idea. Just access the model on the $scope in your controller. fiddle
I have a group of radio buttons the user can choose to create a new entry on the page by invoking an add button OR they can select an existing entry on the page via the radio button and then select an action from a drop down menu. What I am trying to do is if they select an action verify that they selected one of the radio buttons. Watching the radio buttons is not sufficient if they have selected a radio button then I will perform the action on the selection if they didn't i want to present an error. I could bind the select drop down to not exist until they select one of the radio buttons
I think I will try the $scope.$watch and try to control the display of the selection drop down menu only appearing if one of them has been selected.
We are going to become great friends lol. Next step is to query database via services and make the page fully dynamic based on query results.. I simply cannot wait lol.
I've gone to that website you linked because it shows up in all the google searches I've done trying to grasp this rebirth of java scripting.. I got a really good chuckle because it doesn't load because it's chock full of angularjs errors. The browser I use from work likely has to be upgraded to access the site.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.