2016-11-14 35 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

不客氣。如果您認爲它有幫助,請接受答案並進行投票。 –