2015-10-05 42 views
0

我想要執行一個搜索按鈕,這將允許用戶輸入一些數據,然後加載一個包含他們搜索的數據的表。我可以添加一個表格並搜索表格,但是我希望表格在用戶輸入搜索內容後才能看到,然後單擊一個按鈕。我不知道如何做到這一點。我做了這裏plnkr:http://plnkr.co/edit/qrVQ57iVBLV8AHn55I6P?p=preview應用過濾器後的AngularJS加載表

我下面的表格有:

<div> 
<div>Lookup Results</div> 
<div><input type="text" id="searchText" name="searchText" ng-model="query" /></div> 
<table> 
    <thead> 
     <tr> 
      <td>Acc. ID</td> 
      <td>Acc. Name</td> 
      <td>Acc Address</td> 
      <td>City</td> 
      <td>Zip</td> 
      <td>Phone</td> 
      <td>Parent Name</td> 
      <td>Account Type</td> 
      <td>Account Status</td> 
      <td>Credit Term</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="result in vm.results | filter:query "> 
      <td>{{ result.accountId }}</td> 
      <td>{{ result.accountName }}</td> 
      <td>{{ result.address }}</td> 
      <td>{{ result.city }}</td> 
      <td>{{ result.state }}</td> 
      <td>{{ reuslt.zip }}</td> 
      <td>{{ result.phone }}</td> 
      <td>{{ result.parentName }}</td> 
      <td>{{ result.accountType }}</td> 
      <td>{{ result.accountStatus }}</td> 
      <td>{{ result.accountStatus }}</td> 
      <td>{{ result.creditTerm }}</td> 
     </tr> 
    </tbody> 
</table> 

,這裏是我的控制器。

(function() { 

'use strict'; 

angular 
    .module('crm.ma') 
    .controller('LookUpCtrl', LookUpCtrl); 

function LookUpCtrl() { 
    var vm = this; 

    vm.results = [ 
     { 
      accountId: 1, 
      accountName: 'some name', 
      address: '201 some st', 
      city: 'Columbus', 
      state: 'OH', 
      zip: 'zip', 
      phone: '899-629-7645', 
      parentName: 'Parent 1', 
      accountType: 'Type 1', 
      accountStatus: 'Status 1', 
      creditTerm: 'Term 1' 
     }, 
     { 
      accountId: 2, 
      accountName: 'house home', 
      address: '2963 this st', 
      city: 'Columbus', 
      state: 'OH', 
      zip: 'zip', 
      phone: '899-627-7592', 
      parentName: 'Parent 2', 
      accountType: 'Type 2', 
      accountStatus: 'Status 2', 
      creditTerm: 'Term 2' 
     } 
    ]; 


} 
}()); 

誰能告訴我該怎麼做?如果你甚至可以指向我的教程方向,這將是很大的幫助。

+1

這plunker是毫無價值的,所有的資產指向'bower_components'不存在 – charlietfl

回答

1

你可以把一個ng-if上表,以便表將沒有任何查詢值

<table ng-if="query"> 
+0

完美的作品存在!謝謝! – hollyquinn