CODEWITHSUNDEEP
asp.net-mvcangularjs
texas697
texas697

Reputation: 6417

How to Bind a Angular table selection to input fields

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>

Upvotes: 1

Views: 913

Answers (1)

guzart
guzart

Reputation: 3730

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,

  1. Move your ng-controller to a container element that includes the table and the fields.
  2. Then I would add a selectedCustomer to the $scope, in your controller you can initialize the first customer with $scope.selectedCustomer = $scope.customers[0];
  3. Then change the ng-model of the inputs to use the selectedCustomer properties <input ng-model="selectedCustomer.customerAddress" ... />
  4. 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)".

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

Upvotes: 1

Related Questions