Choosing the initial option in an AngularJS radio button

Question

Choosing the initial option in an AngularJS radio button

I need to set the default selected value of a radio button to 3. The code I am using is:

<div class="checkbox-group" ng-init="ac.ServiceCode=3">

                <input type="radio" ng-model="ac.ServiceCode" id="acuOne" value="1" ng-change='GetAcuityLevel(1)'>
                <label for="acuityone">1</label>

                 <input type="radio" ng-model="ac.ServiceCode" id="acuTwo" value="2" ng-change='GetAcuityLevel(2)'>
                 <label for="acuitytwo">2</label>

                 <input type="radio" ng-model="ac.ServiceCode" id="acuThree" value="3" ng-change='GetAcuityLevel(3)'>
                 <label for="acuitythree">3</label>

                 <input type="radio" ng-model="ac.ServiceCode" id="acuFour" value="4" ng-change='GetAcuityLevel(4)'>
                 <label for="acuityfour">4</label>

                 <input type="radio" ng-model="ac.ServiceCode" id="acuFive" value="5" ng-change='GetAcuityLevel(5)'>
                 <label for="acuityfive">5</label>

</div>

However, it always displays the value 3 as selected. When I remove the above code, it correctly shows the selected value in the radio button. My goal is to have the radio buttons pre-select a value if the service returns a value between 1 and 5, otherwise default to 3.

javascript angularjs

Answer 1

Answer №1

The reason for this behavior is due to the presence of an ng-init directive that automatically assigns a value.

ng-init="ac.ServiceCode=3"

By using this approach, the default value will always be set to 3 upon initialization.

To manage ac.ServiceCode differently, especially if your service involves an $http.get request:

        $http.get('api/myservice').
            success(function(data, status, headers, config) {
                 if(data.valueReturned != null)
                    $scope.ac.ServiceCode = data.valueReturned;
                 else
                    $scope.ac.ServiceCode = 3;
            });
    };

In essence, it's advisable to handle the default value logic within your service rather than in the HTML markup.

Answer 2

The reason for this behavior is due to the presence of an ng-init directive that automatically assigns a value.

ng-init="ac.ServiceCode=3"

By using this approach, the default value will always be set to 3 upon initialization.

To manage ac.ServiceCode differently, especially if your service involves an $http.get request:

        $http.get('api/myservice').
            success(function(data, status, headers, config) {
                 if(data.valueReturned != null)
                    $scope.ac.ServiceCode = data.valueReturned;
                 else
                    $scope.ac.ServiceCode = 3;
            });
    };

In essence, it's advisable to handle the default value logic within your service rather than in the HTML markup.

Answer 3

Answer №2

Consider trying this modification:

<div class="checkbox-group" ng-init="ac.ServiceCode = 3">

Instead of the original code above, try using:

<div class="checkbox-group" ng-init="ac.ServiceCode = ac.ServiceCode ? ac.ServiceCode : 3">

This utilizes a ternary operator to verify the value's truthiness and assigns it to 3 if it is not.

Answer 4

Consider trying this modification:

<div class="checkbox-group" ng-init="ac.ServiceCode = 3">

Instead of the original code above, try using:

<div class="checkbox-group" ng-init="ac.ServiceCode = ac.ServiceCode ? ac.ServiceCode : 3">

This utilizes a ternary operator to verify the value's truthiness and assigns it to 3 if it is not.

Answer 5

Answer №3

To resolve the issue, avoid using ng-init and utilize ng-if instead. This will ensure that the appropriate value is selected when the service returns values, otherwise 3 will be selected.

Make a change like this: $scope.ac = {}; becomes $scope.ac = { ServiceCode:4} and observe the behavior.

var app = angular.module('myapp',[]);

app.controller('appCtrl',function($scope){
  
  $scope.ac = {};
  
    
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="appCtrl">
  <div class="checkbox-group" ng-if="!(ac.ServiceCode)?ac.ServiceCode=3:ac.ServiceCode">
    <input type="radio" ng-model="ac.ServiceCode" id="acuOne" value="1" ng-change='GetAcuityLevel(1)'>
                <label for="acuityone">1</label>

                 <input type="radio" ng-model="ac.ServiceCode" id="acuTwo" value="2" ng-change='GetAcuityLevel(2)'>
                 <label for="acuitytwo">2</label>

                 <input type="radio" ng-model="ac.ServiceCode" id="acuThree" value="3" ng-change='GetAcuityLevel(3)'>
                 <label for="acuitythree">3</label>

                 <input type="radio" ng-model="ac.ServiceCode" id="acuFour" value="4" ng-change='GetAcuityLevel(4)'>
                 <label for="acuityfour">4</label>

                 <input type="radio" ng-model="ac.ServiceCode" id="acuFive" value="5" ng-change='GetAcuityLevel(5)'>
                 <label for="acuityfive">5</label>

  </div>
</div>

Answer 6

To resolve the issue, avoid using ng-init and utilize ng-if instead. This will ensure that the appropriate value is selected when the service returns values, otherwise 3 will be selected.

Make a change like this: $scope.ac = {}; becomes $scope.ac = { ServiceCode:4} and observe the behavior.

var app = angular.module('myapp',[]);

app.controller('appCtrl',function($scope){
  
  $scope.ac = {};
  
    
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="appCtrl">
  <div class="checkbox-group" ng-if="!(ac.ServiceCode)?ac.ServiceCode=3:ac.ServiceCode">
    <input type="radio" ng-model="ac.ServiceCode" id="acuOne" value="1" ng-change='GetAcuityLevel(1)'>
                <label for="acuityone">1</label>

                 <input type="radio" ng-model="ac.ServiceCode" id="acuTwo" value="2" ng-change='GetAcuityLevel(2)'>
                 <label for="acuitytwo">2</label>

                 <input type="radio" ng-model="ac.ServiceCode" id="acuThree" value="3" ng-change='GetAcuityLevel(3)'>
                 <label for="acuitythree">3</label>

                 <input type="radio" ng-model="ac.ServiceCode" id="acuFour" value="4" ng-change='GetAcuityLevel(4)'>
                 <label for="acuityfour">4</label>

                 <input type="radio" ng-model="ac.ServiceCode" id="acuFive" value="5" ng-change='GetAcuityLevel(5)'>
                 <label for="acuityfive">5</label>

  </div>
</div>

Choosing the initial option in an AngularJS radio button

Answer №1

Answer №2

Answer №3

Similar questions

Errors are not displayed or validated when a FormControl is disabled in Angular 4

How can we implement the json() method on a promise result that may be either a Response or void in Typescript?

Having some trouble with node.js and the fs module when checking if a file exists. Let

Evaluating Angular directive scopes through function binding (&)

What is the method to activate the ability to select multiple rows in an AngularJS

Is it possible to utilize AngularJS ngAnimate to perform cross-fading transitions on list items?

Encountering the "React Hook useEffect missing dependency" warning for a state variable that does not actually need to be included in the dependency array

External variable accessing the getjson function

Transforming a menu tab into an active anchor when navigating to a particular section

What is the best method for updating inner html with AJAX using the results obtained from json_encode?

What could be causing the Metamask account address to return as undefined even after it was stored in the useState() function?

Creating Angular UI states with parameters in TypeScript

Send the form using an alternative method to avoid using preventDefault

How can I fix my HTML Image input not redirecting when clicked?

The error message states that the object function defined as `(req, res, next) { app.handle(req, res, next); }` does not contain the method 'configure'

Using values across different Express routes in Node.jsIn Node.js development,

Creating elegant Select Dropdown Box in AngularJS without relying on images

Is it acceptable to employ async: false when requesting small amounts of data?

Using Selenium 2 to dynamically insert CSS styles into the currently visible webpage

How can I utilize the LED flash on a Windows Phone using WinJS?