How to set radio button default checked and run the function on page load?

Question

I have a modal window where i have one radio button with current code when i select the radio button it loads the data, How can i set default value checked for radio button and load the toggleChange() method on page load ?

main.html

<div class="col-md-5">
                <input type="radio"
                    name="optionsRadios" id="unrated" ng-value="'assign'" checked="checked"
                    ng-model="nonPersistentProcess.showCriteria" ng-init="toggleChange()">
                    <strong>Show all available controls that are not aligned to this risk</strong>
            </div>

main.js

  $scope.toggleChange = function() {
                if ($scope.nonPersistentProcess.showCriteria === 'disassign') {
                    $scope.controlRiskGridOption = riskToControlGridDataService.getControlsInProcess();
                    $scope.controlRiskGridOption.dataSource = riskToControlGridDataService.getControlsInProcessGridDataSource($stateParams.processId, $scope.nonPersistentProcess.riskKey);
                } else if ($scope.nonPersistentProcess.showCriteria === 'assign') {
                    $scope.controlRiskGridOption = riskToControlGridDataService.getAllControls($scope);
                    $scope.controlRiskGridOption.dataSource = riskToControlGridDataService.getAllControlsGridDataSource($stateParams.processId, $scope.nonPersistentProcess.riskKey);
                }
                $scope.selectedFlagControlInProcess = true;
                $scope.selectedTypeProcess = new Date().getTime();
                $scope.controlInPrcsSelected = {};
                $scope.controlInPrcsNoAlignSelected = {};
                $scope.controlInPrcsSelectedArray = {};
                $scope.controlInPrcsNoAlignSelectedArray = {};
            };

Why not call the function you want to execute on document.ready? — Adam Konieska, Feb 23 '16 at 22:19
Why do you have *one* radio button? By definition radio buttons are supposed to be used in groups. One radio that defaults to checked is pointless, because there is no way for the user to uncheck it. — nnnnnn, Feb 23 '16 at 22:26
maybe he just rushed this up so that he can post it up here in stackoverflow^ chills dude :) he's using angular. so he's past the point of learning the basics from html — l_na_l, Feb 23 '16 at 22:30
before there was two radio buttons but now we need only one and thats why i used toggleChange() before now i want to convert this radio button to label and run the `toggleChange()` so i can get the data for this page but its not happening. — aftab, Feb 23 '16 at 22:33

score 1 · Answer 1 · 2016-02-23T22:20:15.913

1

Using JQuery you can use the Ready method and then set the radio you want to checked using prop:

$(document).ready(function(){
    //code
    toggleChange();
    $("#radio").prop("checked", true);
)}

edited Feb 23 '16 at 22:20

answered Feb 23 '16 at 22:19

I dont want to use Jquery with angularJs, Any AngularJs solution ? – aftab Feb 23 '16 at 22:19
I believe you can use `angular.element(document).ready(func)` for when the page is loaded and in order to check a radio I think you can use `ng-value="true"`. I'm not that good with AngularJs, though. – Feb 23 '16 at 22:23

score 1 · Accepted Answer · answered Feb 23 '16 at 23:24

ng-init is best for initializing data for scope.

As @Jerry said, the angular.element(document).ready method is the best place for running logic on page load; to avoid conflicting with other events might be happening on the page, you can add a $timeout which delays the execution of toggleChange to the next digest cycle. It's not optimal, but it should get you going.

    angular.element(document).ready(function(){
        $timeout(function(){
            $scope.$root.toggleChange();
        },0)
    });

score 0 · Answer 3 · answered Feb 23 '16 at 22:19

0

set

  $scope.nonPersistentProcess.showCriteria = 'assign';

in your controller and call the function

  $scope.toggleChange();

at the bottom of your controller or right after the $scope object declaration

answered Feb 23 '16 at 22:19

oseintow

7,221
3
26
31

How about if remove radio button and just call the function on page load ? – aftab Feb 23 '16 at 22:23

score 0 · Answer 4 · edited May 23 '17 at 10:28

this question is already answered in past posts .

But this is the one that i'm currently using. and it works fine

Your controller, including $timeout

var $scope.init = function(){ //your code }

$timeout($scope.init)

and also this

angular.element(document).ready(function () {
// your code here
});

(link: How to execute angular controller function on page load? )

How to set radio button default checked and run the function on page load?

4 Answers4

Your controller, including $timeout