CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Sha
Sha

Reputation: 1974

Retrieving the id from Model to Controller in Angular JS

i have a table which is having the data retrieved from an api call from my memberController which is displayed inside ng-repeat and its working fine.

I need each Business Name of the member list to link to a separate page(edit_form.html) and display the id value, so that i can pass this along with the api call to get only this particular member detail. So i have added ng-init in my edit form page which calls the function test_funct when the page loads and retrieve each persons id there. unfortunately i am unable to retrieve the id value inside the function.

HTML Template

 <div class="page" data-ng-controller="memberController">
   <table>
      <thead >
        <tr>
            <th>Business Name</th>
            <th>Contact Name</th>
            <th>Trade Balance</th>
            <th>Cash Balance</th>
            <th>Telephone</th>
            <th>Account Number </th>
        </tr>
      </thead>
      <tbody>
        <tr data-ng-repeat="member in details | filter:search">
            <td><a href="#/pages/edit_form/" target="_blank" id="{{member.id}}" class="business_name">{{member.businessname}}</a></td>
            <td>{{member.person}}</td>
            <td>{{member.balance_trade}}</td>
            <td>{{member.balance_cash}}</td>
            <td>{{member.telephone}}</td>
            <td>{{member.accountnumber}}</td>   
        </tr>
      </tbody>
   </table>
  </div>

I have the following controller

function memberController($scope, $http, $cookieStore) {
    var token = $cookieStore.get('token');
    var conId = $cookieStore.get('Cont_Id');
    var exId = $cookieStore.get('ex_Id');
    var member_list = "http://www.vb.com/functions/member_list.html?exchangeid=" + exId +
                      "&contactid=" + conId + "&token=" + token;
    $http.get(member_list)
       .success(function(response) {
           $scope.details = response;
       });

    $scope.test_funct = function(id) {
       $scope.myid = id;
       alert($scope.myid); // getting undefined in alert, i expect the id(eg:1123)
    }
 }

edit_form.html

 <div class="page" data-ng-controller="memberController">
   <div class="panel-body" ng-init="test_funct()"></div>
 </div>

Please assist me on this. Thanks in advance.

Upvotes: 0

Views: 374

Answers (2)

Saurabh Ahuja
Saurabh Ahuja

Reputation: 473

In html do that

<td><a href="#/pages/edit_form/{{member.id}}" target="_blank"  class="business_name">{{member.businessname}}</a></td>
...
In app.js or where you define route do that

                .when('/edit/:memberid',
            {

                templateUrl:'partials/edit.html',
                controller:'editController'

            })   
In controller you have to take  this id by doing that

app.controller("editController",function($routeParams,$scope){

     $scope.memberid=  $routeParams.memberid;
   //Now use this member id to fetch all data   
   });

Upvotes: 0

deitch
deitch

Reputation: 14601

There are 2 things going on here.

First, you should separate controllers for the different views, so you end up with something like this:

<div class="page" data-ng-controller="memberController">
  <table>
    <!-- your whole big table here -->
  </table>
</div>

And your editing form as follows:

<div class="page" data-ng-controller="editController">
   <div class="panel-body"></div>
</div>

Notice that you now have two distinct controllers - your "editController" and your "memberController".

The second question then becomes, how do you transfer the selected ID from the list view ("memberController") to the edit view ("editController").

There are 2 ways of doing that.

First, you could use a service shared between the controller:

.factory('SelectedId',function() {
   return {};
});

And then in your "member" view, you would set it upon clicking:

<a href="#/pages/edit_form/" target="_blank" id="{{member.id}}" class="business_name" ng-click="setId(member.id)">{{member.businessname}}</a>

Notice the ng-click, which then needs a function in the memberController and the injected service:

.controller('memberController',function($scope,SelectedId) {
    $scope.setId = function(id) {
      SelectedId.id = id;
    };
});

While the editController retrieves it:

.controller('editController',function($scope,SelectedId) {
    $scope.id = SelectedId.id;
});

The above option works well, especially for complex things like shopping carts. If all you are doing is passing an ID, I would just stick it in the URL:

<a href="#/pages/edit_form/{{member.id}}" target="_blank" id="{{member.id}}" class="business_name">{{member.businessname}}</a>

So that the ID is part of the URL. You then can retrieve it in the "editController":

.controller('editController',function($scope,$routeParams) {
    $scope.id = $routeParams.member;
});

assuming you are using ng-route, and your route would look like:

    $routeProvider.when('/pages/edit_form/:member',{templateUrl:'/route/to/template.html',controller:'editController'});

Upvotes: 2

Related Questions