wie man zwei Methoden oder Funktion in HTML vom Controller auf Seite laden mit angularjs aufrufen

Question

Ich bin neu zu angularjs und ich versuche, zwei Funktionswerte beim Laden der Seite anzuzeigen.

Ich kann nur eine Funktion laden. Wenn ich versuche, zwei Methoden zu laden, wird nur die erste init Methode geladen.

Dann versuche ich eine gemeinsame Funktion "Daten-ng-init =" initializeMethods()“ in html zu erklären, aber ich bin nicht in der Lage einen Wert zu erhalten.

Meine HTML-Seite

Ich verwendete den Namen der allgemeinen Init-Funktion als "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> 

Mein -Controller

Hier ist die gemeinsame Funktion "$ scope.initializeMethods = function() {", die es zwei verschiedene Funktionen enthält, sind „$ scope.getDisplayList = function() {“ und "$ 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); 
        } 
      }); 
     } 
    } 

Kann mir bitte jemand sagen, wie ich beide Funktionswerte beim Laden der Seite anzeigen kann.

Vielen Dank im Voraus.

Answer 1

Dies ist in ES6 geschrieben, aber Sie erhalten den Kern.

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'; 
    } 
} 

Sie usw. für ES5 umschreiben könnte,

Answer 2

eigentlich funktionieren Ihre initializeMethods nur Ihre getDisplayList und Geburtstage Funktionen erklären. Wenn Sie beide am Ende der initializeMethods nennen, sollte es funktionieren:

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

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

Answer 3

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 
}