CODEWITHSUNDEEP
selectdrop-down-menu
Alomoni
Alomoni

Reputation: 123

How to display mulitple values from DropDown/Select option in AngularJS?

I am very new to AngularJS development and is using angularJS(Pre-2). I have the following requirements

The customer list comes in the following format

{customerID: 100, customerNumber: 1002, CustomerName: "John DoeA"},
{customerID: 101, customerNumber: 1003, CustomerName: "John DoeB"},
{customerID: 102, customerNumber: 1004, CustomerName: "John DoeC"},

so, $scope.customers = customerList;

In the select option I have the following

<select ng-model="customerID"
                ng-options="customer.customerID as customer.CustomerName +
        '  (' + customer.customerNumber + ')' for customer in customers">                
        </select>

What I would like see to happen?

Once the user has selected one customer say, John DoeA, I would like display the entire customer information

Customer Number: 1002 (text box) Customer Name: John DoeA

How do I accomplish this one?

I would really appreciate any body's help in this regard.

Thanks in advance.

Upvotes: 1

Views: 47

Answers (1)

SamB
SamB

Reputation: 151

try the code below: 

    <p>Select a customer:</p>


    <select ng-model="selectedCustomer"
                    ng-options=" customer.CustomerName +
            '  (' + customer.customerNumber + ')' for customer in customers">                
            </select>
            </br>

    <h1>You selected:</h1>
    <span>CustomerID:</span>   {{selectedCustomer.customerID}} </br>
         <span>customerNumber:</span>   {{selectedCustomer.customerNumber}} </br>
         <span>CustomerName:</span>   {{selectedCustomer.customerID}} </br>

    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.customers = [
          {customerID: 100, customerNumber: 1002, CustomerName: "John DoeA"},
          {customerID: 101, customerNumber: 1003, CustomerName: "John DoeB"},
          {customerID: 102, customerNumber: 1004, CustomerName: "John DoeC"}
        ];
    });
    </script>

Upvotes: 1

Related Questions