イメージ

gistfile1.html

<script type="text/azalea-coffee">
azalea = require 'azalea'
mongo = require 'mongo-wrapper'

azalea.events.start = ->
  mongo.connect()
    .then (db) -> db.productCategory.find()
    .then (categories) ->
      azalea.models.condition.categories = categories

azalea.functions.search = ->
  azalea.models.loading = true
  { id, name, categories } = azalea.models.condition
  mongo.connect()
    .then (db) ->
      db.product.find
        id: $regex: id
        name: $regex: name
        category: $in: categories
          .filter (c) -> c.selected
          .map (c) -> c.value
    .then (products) ->
      azalea.models.result.items = products
    .then ->
      azalea.models.loading = false
</script>

<form az-model="condition">
  ID: <input az-prop="id">
  Name: <input az-prop="name">
  <div>
    Category:
    <select multiple>
      <option az-repeat="cat in categories">{{ cat.name }}</option>
    </select>
  </div>
</form>
<button az-click="search()" az-disabled="loading">
  Search
  <img src="/assets/loading_icon.gif" alt="loading..." az-show="loading">
</button>

<table az-model="result">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Category</th>
  </tr>
  <tr az-repeat="item in items">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.category.name }}</td>
  </tr>
</table>