2016-11-14 59 views
-2

如何通过使用angular JS选择要在UI上显示的特定客户从数组中检索数据?假设我们有顾客详细信息包含的顾客数组(如姓名,电子邮件,电话等)。现在我想选择一个特定的客户,以获取在客户相应的用户界面中显示的所有信息。如何使用angularJS从数组中检索数据?

这是视图:enter image description here 左侧显示的客户名单,我想选择任何单一客户和选择任何客户毕竟必填字段必须由控制器的阵列检索数据动态填充。

+2

请提供代码以配合您的答案。在这种情况下,至少应提供你所描述的数组。 –

+0

客户对应的用户界面引用输入字段(TextField)。 –

+0

好的。你需要提供你的视图,控制器和对象。这个问题没有提供人们正确回答这个问题所需的基本信息! –

回答

0

我假设在左侧的单个页面中,您有一个客户列表,一旦客户被点击,您必须在右侧显示其信息。在另一个变量 如果你有customerse

{[ 
    {id:1, name: "John Doe", email: "[email protected]", phone: "00000"}, 
    {id:2, name: "Johnny Doe", email: "[email protected]", phone: "11111"}, 
    {id:3, name: "John Roe", email: "[email protected]", phone: "22222"}, 
]} 

像这样的数组在HTML的左侧,您使用NG-重复列出的客户,在这里使用NG单击并储存起来 - 像以下。

<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中的控制器中可用,因此您可以使用它来保存对窗体所做的更改。

希望这有助于。

+0

谢谢保尔森彼得给你合适的答案。 –

+0

不客气。如果您认为它有帮助,请接受答案并进行投票。 –