How to Bind a Angular table selection to input fields

Question

I have a Modal that has a table on the left with all the Customers in a table. On the right side are input fields. I need a user to be able to click on a Customer and populate the inputs fields with the Customer property values.

I made a Plunkr

My Code

 <table class=" table table-bordred table-striped table-hover">
      <tr><th style="font-weight: bold;">Customers</th></tr>
          <tbody>
              <tr ng-repeat="job in jobArray" class="pointer">
                  <td>{{job.Customers[0].CustomerName}}</td>
               </tr>
          </tbody>
  </table>

<div class="form-group">
   <div class="input-group">
      <span class="input-group-addon">C. Name</span>
      <input style="width:400px" ng-model="CustomerName"  type="text" />
    </div>
</div>

<div class="form-group">
     <div class="input-group">
          <span class="input-group-addon">C. Address</span>
          <input style="width:390px" ng-model="CustomerAddress" type="text">
 </div>

I guess the plunkr is not working because user3919120 doesn't know how to do it. — guzart
– guzart, Commented Aug 22, 2014 at 17:23

guzart · Accepted Answer · 2014-08-22 17:22:02Z

1

Of course there are many way of doing it.

The easiest way is for them to communicate using the same $scope, using the same controller,

Move your ng-controller to a container element that includes the table and the fields.
Then I would add a selectedCustomer to the $scope, in your controller you can initialize the first customer with $scope.selectedCustomer = $scope.customers[0];
Then change the ng-model of the inputs to use the selectedCustomer properties <input ng-model="selectedCustomer.customerAddress" ... />
Now we need to change the selectedCustomer to match the one you click on, you can use ng-click to execute an expression when an element is clicked. <tr ng-click="setSelectedCustomer(customer)".
This also means we need the setSelectedCustomer function in the scope, so in the controller you can declare the function

$scope.setSelectedCustomer = function (customer) { $scope.selectedCustomer = customer; }

Here's a plunkr.

http://plnkr.co/edit/9SkOWYEQt5dAGPwKbEOW?p=preview

Note: Instead of adding stuff to the scope, take a look at aliasing the controller and adding stuff to the controller instance. Happy coding.

answered Aug 22, 2014 at 17:22

guzart

3,73030 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

th1rdey3 Over a year ago

@guzart, but if I want to use the same form to add a new customer? what should I do then?

guzart Over a year ago

@th1rdey3 you would need another variable to store the form customer, i.e. the user bound to the form, and the table customer, so that when you click on "New Customer" you set $scope.formCustomer = getEmptyCustomer(); and when clicking "Edit" you set $scope.formCustomer = getCustomer(id); for example.

Collectives™ on Stack Overflow

How to Bind a Angular table selection to input fields

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related