CODEWITHSUNDEEP
javascriptangularjs
rahul aggarwal
rahul aggarwal

Reputation: 265

Selecting default value in radio button angularjs

I want to show the default selected value of radiobutton as 3. My code is as follows:-

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

But in this case it always shows 3, when I remove above code it shows correct selected value in radio button. I want if service returns some value (1 to 5) then radio buttons should be selected else default value 3 should be selected.

Upvotes: 1

Views: 3269

Answers (3)

Dinesh Shah
Dinesh Shah

Reputation: 1233

you can do like this , dont use ng-init , ng-if will solve your issue. when service return values than appropriate value selected else 3 will be selected.

try to change this like $scope.ac = {}; as $scope.ac = { ServiceCode:4} and observe the behaviour.

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>

Upvotes: 0

Jamy
Jamy

Reputation: 911

Try replacing this line:

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

With this:

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

Used a ternary operator to check if the value is truthy, otherwise defaults to 3.

Upvotes: 0

illeb
illeb

Reputation: 2947

That's because you have an ng-init that does that for you.

ng-init="ac.ServiceCode=3"

By this way, your default value will always be 3 and always initialized to that value.

You should handle ac.ServiceCode differently: assuming your service is 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 other words, you should handle your default value in your service, not in your HTML.

Upvotes: 2

Related Questions