Question

我有一个表，它从我的memberController的api调用中检索数据，该调用显示在ng-repeat中并且工作正常。

我需要将成员列表的每个商业名称链接到一个单独的页面（edit_form.html）并显示id值，以便我可以将其与api调用一起传递以仅获取此特定成员详细信息。所以我在我的编辑表单页面中添加了ng-init，当页面加载并检索每个人ID时，它调用函数test_funct。不幸的是，我无法检索函数内的id值。

HTML模板

 <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>

我有以下控制器

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>

请帮助我。提前谢谢。

Answer 1

这里有两件事。

首先，你应该为不同的视图分开控制器，所以你最终得到这样的东西：

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

您的编辑表格如下：

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

请注意，您现在有两个不同的控制器 - 您的＆＃34; editController＆＃34;和你的＆＃34; memberController＆＃34;。

第二个问题变成，如何将所选ID从列表视图（＆＃34; memberController＆＃34;）传输到编辑视图（＆＃34; editController＆＃34; ）。

有两种方法可以做到这一点。

首先，您可以使用控制器之间共享的服务：

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

然后在你的＆＃34;会员＆＃34;查看，您可以在点击时设置：

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

注意ng-click，然后需要memberController中的函数和注入的服务：

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

editController检索它时：

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

上述选项效果很好，尤其适用于购物车等复杂事物。如果你正在做的 all 正在传递一个ID，我会把它贴在URL中：

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

因此ID <是网址的一部分。然后，您可以在＆＃34; editController＆＃34;：

中检索它

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

假设您正在使用ng-route，您的路线将如下所示：

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

Answer 2

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

在Angular JS中从模型到控制器检索id

2 个答案: