angular-state-router/example/screens/search.html

An AngularJS state-based router designed for flexibility and ease of use.

<section class="screen">
  <div class="jumbotron">
    <div class="container">
      <h1>Search</h1>

      <form role="search">
        <div class="row">
          <div class="col-lg-6">
            <input type="text" class="form-control" ng-model="search.criteria" ng-change="search()" placeholder="Keywords">
          </div>
        </div>
      </form>

    </div>
  </div>

  <div class="container">
    <div class="row">

      <div class="col-lg-12" ng-if="products && products.length !== 0">
        <p>{{ products.length }} results found.</p>
      </div>
      
      <div ng-repeat="product in products" class="col-xs-12 col-sm-6 col-md-3">
        <a class="thumbnail" href="#/products/{{product.catalog}}/{{product.item}}" sref="products.items({catalog:'{{product.catalog}}', item:'{{product.item}}'})">
          <img data-src="holder.js/100%x200" alt="100%x200" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTkyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDE5MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRlZmYyNTkwOGEgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNGVmZjI1OTA4YSI+PHJlY3Qgd2lkdGg9IjE5MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3MC4wNDY4NzUiIHk9IjEwNC41Ij4xOTJ4MjAwPC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true" style="width: 100%; display: block;">
          <div class="caption">
            <h3>{{product.name}}</h3>
            <p>{{product.description}}</p>
          </div>
        </a>
      </div>

      <div class="col-lg-12" ng-if="!products || products.length === 0">
        <p>No results found.</p>
      </div>

    </div>
  </div>


</section>