
# Implement Search In Angular

[中文文档](2014-10-14-seagull-design-and-implement-zh.md)

## Updating ...

// GEt angular tutorial 
# Implement Search In Angular

[中文文档](2014-10-14-seagull-design-and-implement-zh.md)

If you have experienced seagull, you may notice that searching in seagull is super fast. Do you know why? Because it's implemented in front-end which benefics from AngularJS.

## Official Tutorial

If you're new to AngularJS, I recommand you to read the simple tutorial from <http://angular-tutorial>. It use AngualrJS in a simple but powerful single page application. One of those steps introduce how to implment search in AngularJS.

## How To Implement It

Now I would like to should you the code of seagull to implement search.

Firstly, we add a search filter when we list all objects in seagull/static/html/containers.html

```
<tbody>
  <tr ng-repeat="container in containers | filter: search track by $index">
    <td>{{container.Names | array_to_string}}</td> <!-- Add comma between names -->
    <td>{{container.Image}}</td>
    <td>{{container.Command}}</td>
  </tr>
</tbody>
```

The name of this filter is arbitrary and here's "search". I will use "search" in the same containers.html.

```
 <div class="page-header-right input-group">
   <input type="text" class="form-control" placeholder="{{'search'|translate}}" ng-model="search" autofocus>
 </div>
```

The important code is `ng-model` which will get the data from the input. Because the data of AngularJS is two-way binding so the filter is dynamically changed when we input something.

## Any Problem?

That's all about how we implement search in seagull. If you have any problem, don't hesitate to contact me.

Write doc of implement search in angular
Write doc of implement search in angular
