angularjsasp.net-mvc-4angularjs-ng-repeatangularjs-ng-init

I am using MVC 4 and angularjs in this actually I want to call an angular js function on page load


i want to invoke angularjs function (DeptSpecific) on page load and am passing ID as the parameter which is hard coded. And that i am passing via ng-init="DeptSpecific('1')". I am learning angularjs please suggest me how to call a function and pass a parameter to it on page load without any click or anything just when a page load a function should be called. If you are thinking why i used ng-init ..there is no specific reason for this it might be wrong but it calls the function well i can see that in debugger (f12) but $scope.s i undefined even though there is a matched ID.

 $scope.DeptSpecific = function (ID) {

    var BelongsToThisDepartment = [];
    $http.get('/Department/getDept').success(function (response) {
      $scope.departments = $scope.$eval(response);
    });
    angular.forEach($scope.departments, function (item1) {
       if (item1.ID == ID) {
          BelongsToThisDepartment.push(item1);
       }
    })

   $scope.s = $scope.$eval(angular.toJson(BelongsToThisDepartment));

   // console.log(JSON.stringify($scope.s));

 }




<div ng-app="MyApp">
   <div ng-controller="MyController">
      <table class="tableData" border="0" cellspacing="0" cellpadding="0" ng-init="DeptSpecific('1')">
          <thead>
            <tr>
              <th></th>
              <th>ID</th>
              <th>NAME</th>
              <th>LOCATION</th>
             </tr>
           </thead>
           <tbody ng-repeat="O in s">
              <tr ng-class-even="'even'" ng-class-odd="'odd'">
                 <td class="CX" ng-click="student(O.ID)"><span>+</span></td>
                  <td>{{O.ID}}</td>
                  <td>{{O.Name}}</td>
                  <td>{{O.Location}}</td>
               </tr>

Solution

  • Looking at your code, using ng-init is fine, but your $scope.departments may not be accessible outside of the .success method.

    angular.module('MyApp')
     .controller('MyController', ['$scope', function($scope) {
        $scope.DeptSpecific = function (ID) {
          var BelongsToThisDepartment = [];
          $http.get('/Department/getDept')
            .success(function (response) {
               $scope.departments = $scope.$eval(response);
    
               angular.forEach($scope.departments, function (item1) {
                 if (item1.ID == ID) {
                  BelongsToThisDepartment.push(item1);
                 }
               })
               $scope.s =   $scope.$eval(angular.toJson(BelongsToThisDepartment));
               console.log($scope.s);
           });
         }
     }]);
    

    now if that works for you but you also want to be able to access $scope.s outside of that .success;

    You can write a function, add it into .success pass the value returned onSucess, and do what you want to do.

    .success(function(response) {
      callAFunction(response);
     }