Ajax请求列表中的特定项

Question

I'm new to AngularJS and I don't know how to accomplish a task. In my system I have a database with two tables: "Customers" and "Offices". This is a 1:N relation. In my HTML page I have a list (actually is a table) that contains info about the customers (info extracted from the "Customers" table). For each row of the table, you can find a button. If you click on that button some infos about the offices of THAT customer are loaded from the database.

The first part is quite simple. This is the Angular service that loads customers info:

angular.module("app").factory("Customer", ["$resource", 
    function($resource){
        return $resource("/customers/list", 
                            {format:'json'},
                            {
                                find: {
                                       method:'GET'
                                }
                            });
}]);

This is the Angular controller that exposes an array of customers:

angular.module("app").controller("customersController", ["Customer", "$scope",
    function (Customer, $scope){
        var customers = new Array();
        var metacustomers = Customer.find(function(){
            for(var i=0; i<metacustomers.results.length; i++){
                customers[i] = new Object();
                customers[i].customerName = metacustomers.results[i].customer_name;
                customers[i].customerID = metacustomers.results[i].customer_ID;
            }
            $scope.customers = customers;
        });
}]);

And this is the part of the view that shows info:

<table>
                    <thead>
                            <th></th>
                            <th></th>
                            <th></th>
                    </thead>
                    <tr data-ng-repeat="customer in customers | filter:query">
                            <td>
                                    <a href="#expan-offices">+</a>
                            </td>
                            <td>
                                <strong>{{customer.customerName}}</strong>
                            </td>
                            <td>
                                <div>           
                                    <a title="Modify customer" href="/customers/post/{{customer.customerID}}">
                                    </a>
                                    <a title="Delete customer" href="/customers/delete/{{customer.customerID}}">
                                    </a>
                                </div>
                            </td>
                        </tr>
                </table>

All of this looks like:

The problem arrives with the second task. When I click on the "+" button I must load the offices infos about THAT customer (the customer on the same row of the button). I need the customerID to retrieve these infos and I have it. But, how can I say to Angular to load exactly the info belongs to the right customer? I don't know how to model this situation. I need your help. Thank you in advance.

Answer 1

You can pass the customer to the ng-click directive like so:

 <a href="#expand-offices" ng-click="expand(customer)">+</a>

And then create an expand function in your controller which takes a customer as its input. Something like this:

$scope.expand = function(customer){
    //fetch the customer
};