how to call two methods or function in html from controller on page load using angularjs

Question

I am new to angularjs and I am trying to display two function values on page loading.

I am able to load only one function. When i try to load two methods only first init method is loading.

Then i try to declare a common function "data-ng-init="initializeMethods()" in html but I am not able to get any value.

My html page

I used common init function name as "data-ng-init="initializeMethods()".

<div class="container-fluid text-center" ng-controller="UserDataController as ctrl" data-ng-init="initializeMethods()">

     <div class="row content">
            <div class="col-sm-2 sidenav">
        <div class="well well-lg col-xs-30" style="background-color: green;" ng-show="true">

        <img class="img-responsive" style="padding-bottom:10px;" src="css/images/image.jpg" />
        <div class="form-group"> 
           <select class="form-control" ng-model="model.selectedValue" name="groupzname"> 
               <option ng-repeat="item in model.dropDownData track by $index" value="{{item}}">{{item}}</option>
                   </select>
                    </div>
                </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li><a href="#/dashboard"><span class="glyphicon glyphicon-dashboard vmenu"></span>Dashboard</a>
      </li>
      <li class="#/Profile"><a href="#/"><span class="glyphicon glyphicon-user vmenu"></span>Profile</a>
      </li>
         <li><a href="#/Account"><span class="glyphicon glyphicon-edit vmenu"></span>Account</a>
      </li>
         <li><a href="#/Dropbox"><span class="glyphicon glyphicon-tags vmenu"></span>Dropbox</a>
      </li>
         <li><a href="#/Checklist"><span class="glyphicon glyphicon-off vmenu"></span>Checklist</a>
      </li>
        <li><a href="#/Report"><span class="glyphicon glyphicon-off vmenu"></span>Report</a>
      </li>
        <li><a href="#/Settings"><span class="glyphicon glyphicon-off vmenu"></span>Settings</a>
      </li>
        <li><a href="#/Help"><span class="glyphicon glyphicon-off vmenu"></span>Help</a>
      </li>
    </ul>

  </div>
    </div>


    <div class="col-sm-8 text-left" ng-show="true"> 
      <h1>Welcome</h1>
      <div class="form-group">
          <label class="form-control" ng-model="model.membervalue" name="membername" style="border:none"> {{model.membervalue}}</label>
        </div>
</div>
</div>


        <div class="col-sm-4">
        <div class="panel panel-primary">
      <div class="panel-heading"><img src="css/images/Birthday.png" />BIRTHDAYS TODAY</div>
      <div class="panel-body">

      <ul>
        <li ng-repeat="data in displayBirthdays">{{data}}</li>
          </ul>
            </div>
                </div>

My Controller

Here the common function " $scope.initializeMethods = function(){" which contains two different functions in it are "$scope.getDisplayList = function(){" and "$scope.Birthdays = function(data){"

   $scope.initializeMethods = function(){

     $scope.getDisplayList = function(){

         $scope.model.dropDownData = [];
         console.log(displaynames);
         for(var i=0; i<displaynames.length; i++)
          { 
            $scope.model.dropDownData.push(displaynames[i].groupzname + " - "+displaynames[i].membername + " - "+displaynames[i].membercode); // we can itterate and set the drop down values

            console.log($scope.model.dropDownData);
            $scope.model.selectedValue =displaynames[i].groupzname + " - "+displaynames[i].membername + " - "+displaynames[i].membercode;   // set model value

        $scope.model.memberName = displaynames[i].membername;

        }
            $window.localStorage.x = $scope.model.dropDownData;  //setting data in cookies

     }


        $scope.Birthdays = function(data){

             var current_date = moment().format('YYYY-MM-DD');
             var date_time = current_date + " 00:00:00";
             var json = {
                 "json": {
                    "request": {
                        "servicetype": "21",
                        "functiontype": "2021",
                        "memberid": $rootScope.displayList[0].memberid,
                        "groupzcode": $rootScope.displayList[0].groupzcode,
                        "date":date_time,
                        "country": [
                            "India"
                        ],
                        "state": [
                            "_ALL"
                        ],
                        "city": [
                            "_ALL"
                        ],
                        "segment": [
                            "_ALL"
                        ],      
                        "groupzlist":[
                        $rootScope.displayList[0].groupzcode
                        ], "session_id":$rootScope.displayList[0].session_id,
                    }
                }
            }

        UserService.Birthdays(json).then(function(response){
                 //callback(response);
            var show_birthdays = [];

                console.log("displayBirthdays");
                 if (response.json.response.statuscode != 0 && response.json.response.statusmessage !='Success') {
                     show_birthdays = response.json.response.statusmessage;
                     console.log("show_birthdays "+show_birthdays);

                 }else {
                        console.log("Greeting response: "+response);
                     var resp = response;
                     var greetings = resp.json.response.greetings;
                     console.log(greetings);
                     console.log(show_birthdays);
                    }
            }); 
        }
    }

can anyone please tell me how I can display both function values on page loading.

Thanks in advance.

Its showing error as "angular.js:9997 Error: [$parse:syntax] Syntax Error: Token ',' is an unexpected token at column 17 of the expression [getDisplayList(),Birthdays()] starting at [,Birthdays()]" — Kalaiyarasi M
– Kalaiyarasi M, Commented Jun 1, 2016 at 7:18
sorry you should put semicolon data-ng-init="getDisplayList();Birthdays() — Hadi
– Hadi, Commented Jun 1, 2016 at 7:20

rrd · Accepted Answer · 2016-06-01 07:19:43Z

0

This is written in ES6, but you get the gist.

export default class MyController {
  constructor() {
    super(arguments);

    this.MakeInitCall();
  }

  MakeInitCall() {
    // Your initialisation code here, gets called on controller (page) start;
    this.getDisplayList();
    this.Birthdays(data);
  }

  getDisplayList() {
    $scope.whatevervariable = 'foo';
  }

  Birthdays(data) {
    $scope.anothervariable = 'bar';
  }
}

You could rewrite for ES5 etc.,

answered Jun 1, 2016 at 7:19

rrd

5,9873 gold badges32 silver badges37 bronze badges

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

Comments

Mickaël R. · Accepted Answer · 2016-06-01 07:20:56Z

0

Actually your initializeMethods function just declare your getDisplayList and Birthdays functions. If you call both of them at the end of the initializeMethods, it should work:

$scope.initializeMethods = function(){
    $scope.getDisplayList = function(){...}
    $scope.Birthdays = function(){...}

    $scope.getDisplayList();
    $scope.Birthdays();
}

answered Jun 1, 2016 at 7:20

Mickaël R.

3442 silver badges7 bronze badges

1 Comment

Mickaël R. Over a year ago

few seconds too late, but approx. same idea as @rrd :)

Huy Chau · Accepted Answer · 2016-06-01 07:28:57Z

0

Controller:

$scope.initializeMethods = initializeMethods;
$scope.getDisplayList = getDisplayList;
$scope.birthdays = birthdays;

// Init function when page load
$scope.initializeMethods();

function initializeMethods () {
   $scope.getDisplayList();
   $scope.birthdays();
}

function getDisplayList () {
   // something
}

function birthdays () {
   // something
}

answered Jun 1, 2016 at 7:28

Huy Chau

2,24821 silver badges26 bronze badges

Collectives™ on Stack Overflow

how to call two methods or function in html from controller on page load using angularjs

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related