2016-11-14 9 views
-2

角型JSを使用してUIに表示する特定の顧客を選択して配列からデータを取り出す方法は?顧客の詳細に名前、電子メール、電話などが含まれている顧客配列があるとします。今、特定の顧客を選択して、顧客対応のUIに表示されるすべての情報を取得したいと考えています。 angularJSを使用して配列からデータを取り出す方法は?

この

はビューです: enter image description here 左側には顧客のリストを示して、私は任意の単一の顧客を選択するとすべての顧客を選択した後に、必要なすべてのフィールドには、コントローラの配列からデータを取得することにより、動的に記入する必要があります。

+2

回答に付随するコードを入力してください。この場合、少なくとも、記述している配列を提供してください。 –

+0

カスタマーの対応するUIは入力フィールド(TextField)を参照します。 –

+0

ビュー、コントローラー、およびオブジェクトを提供する必要があります。この質問は、誰かがこの質問に正しく答えるために必要な基本情報を提供していません! –

答えて

0

左側のページには顧客のリストがあり、顧客がクリックされるとその情報が右側に表示されます。ここ あなたがcustomerse左側のためのあなたのHTML内

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

で、このような配列を持っている場合、あなたは顧客を一覧表示するには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

ようこそ。それが助けられたと思えば、答えを受け入れて投票してください。 –

関連する問題