JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">

  <p>Type a letter in the input field:</p>

  <p>
    <select ng-model="test" ng-init="test=''">
      <option value="">select</option>
      <option value="foo">foo</option>
      <option value="bar">bar</option>
    </select>
  </p>
  <p>
    <select ng-model="test2" ng-init="test2=''">
      <option value="">select</option>
      <option value="a">a</option>
      <option value="B">B</option>
    </select>
  </p>

  <ul>
    <li ng-repeat="x in names | filter: {name1:((test != ''? test: '')), name2: ((test2 != ''? test2 : ''))}:true">
      {{ x.name1 }}, {{ x.name2 }}
    </li>
  </ul>

</div>

JavaScript

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name1: 'foo', name2: 'AA'},
         {name1: 'foo', name2: 'a'},
         {name1: 'bar', name2: 'A'},
         {name1: 'quad', name2: 'B'},
         {name1: 'bar', name2: 'B'},
         {name1: 'foo', name2: 'B'},
         {name1: 'bar', name2: 'B'},
         {name1: 'quad', name2: 'A'},
         {name1: 'bar', name2: 'A'}
    ];
});