Question

如何通过使用angular JS选择要在UI上显示的特定客户来从数组中检索数据？假设我们有客户数组，其中包含客户详细信息（如姓名，电子邮件，电话等）。现在，我想选择一个特定的客户来获取客户相应UI中显示的所有信息。

这是观点：enter image description here 左侧显示了客户列表，我想选择任何一个客户，在选择任何客户后，必须通过从控制器阵列中检索数据来动态填写所有必填字段。

Answer 1

我认为，在单个页面的左侧，您有一个客户列表，一旦点击了客户，您必须在右侧显示其信息。如果你在customerrse中有这样的数组

{[
    {id:1, name: "John Doe", email: "example1@domain.com", phone: "00000"},
    {id:2, name: "Johnny Doe", email: "example2@domain.com", phone: "11111"},
    {id:3, name: "John Roe", email: "example3@domain.com", phone: "22222"},
]}

在左侧的html中，您使用ng-repeat列出了客户，这里使用ng-click并将其存储在另一个变量中 - 如下所示。

<ul>
    <li ng-repeat="customer in customers" ng-click="viewCustomer = customer;">
       {{customer.name}}
    </li>
</ul>

然后您可以使用该变量（viewCustomer）填充右侧显示的表单。有些事情如下。

<form name="customerForm">
    <input type="text" name="name" ng-model="viewCustomer.name">
    <input type="text" name="name" ng-model="viewCustomer.email">
    <input type="text" name="phone" ng-model="viewCustomer.phone">
</form>

viewCustomer将在$ scope.viewCustomer中的控制器中可用，因此您可以使用它来保存对表单所做的更改。

希望这会有所帮助。

如何使用angularJS从数组中检索数据？

1 个答案: