JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="http://angularlight.org/bin/alight_0.13.last.min.js"></script>
<div id="app">
  <select al-value="doctor">
      <option selected value="">Все специальности</option>
      <option value="pediatric">Детский стамотолог</option>
      <option value="surgeon">Хирург</option>
  </select>

  <select al-value="city">
      <option selected value="">Все</option>
      <option value="moscow">Moscow</option>
      <option value="piter">Piter</option>
      <option value="new-york">New-York</option>
  </select>

  <div al-repeat="person in people" :hidden="!show(person)">{{person.name}}</div>
  
  <hr/>
  Doctor: {{doctor}} <br/> City: {{city}}
</div>

JavaScript

var app = {
	people: [
  	{name: 'John', type: 'surgeon', city: 'moscow'},
  	{name: 'Mark', type: 'surgeon', city: 'moscow'},
  	{name: 'Lisa', type: 'pediatric', city: 'piter'},
  	{name: 'Stive', type: 'pediatric', city: 'piter'},
  	{name: 'Bill', type: 'surgeon', city: 'new-york'}
  ],
	show: function(person) {
  	if(app.city && app.city != person.city) return false;
    if(app.doctor && app.doctor != person.type) return false;
    return true;
  }
}

alight('#app', app);