JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="app">
  <div ng-controller="ctrl">
    <p>搜索全部: <input type="text" ng-model="search.$"/></p>
    <p>搜索姓名: <input type="text" ng-model="search.name"/></p>
    <p>搜索电话: <input type="text" ng-model="search.phone"/></p>
    <ul>
      <li ng-repeat="friend in friends|filter:search:mode">
        <span><b>name:</b>{{friend.name}}</span>
        <br/>
        <span><b>tel:</b>{{friend.phone}}</span>
      </li>
    </ul>
  </div>
</body>

CSS

* {
      font-family:'MICROSOFT YAHEI'; color:#626262;
    }
    b {
      font-weight:normal; color:#169FE7;
    }

JavaScript

var app = angular.module('app',[]);
  app.controller('ctrl',function($scope){
    $scope.friends = [
      {name:'John', phone:'555-1276'},
      {name:'Mary', phone:'800-BIG-MARY'},
      {name:'Mike', phone:'555-4321'},
      {name:'Adam', phone:'555-5678'},
      {name:'Julie', phone:'555-8765'},
      {name:'Juliette', phone:'555-5678'}
    ];
    $scope.search = {$:'',name:'',phone:''};
    $scope.mode = function(actual,expected){
      if(actual===expected || expected==''){
        return true
      }
      else {
        return false
      }
    }
  })