如何在AngularJS中显示下拉/选择选项中的多个值？

Question

我对AngularJS开发非常陌生，正在使用angularJS(Pre-2)。我有以下要求

客户列表的格式如下

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

在select选项中，我有以下内容

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

我希望看到什么发生？

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?

我真的很感谢任何人在这方面的帮助。

提前谢谢。

Answer 1

尝试下面的代码：

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