JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="app">
  <div ng-controller="ctrl">
    <ul>
      <li ng-repeat="list in lists|filter:condition:mode">
        <span><b>name:</b>{{list.name}}</span>
        <br/>
        <span><b>age:</b>{{list.age}}</span>
      </li>
    </ul>
  </div>
</body>

CSS

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

JavaScript

var app = angular.module('app',[]);
app.controller('ctrl',function($scope,$filter){
    $scope.lists = [
      {name:'code_bunny',age:12},
      {name:'code_dog',age:3},
      {name:'code_cat',age:22},
      {name:'white_bunny_1',age:11},
      {name:'white_bunny_2',age:11},
      {name:'black_bunny',age:9},
      {name:'mi_bunny_1',age:2},
      {name:'mi_bunny_2',age:10},
      {name:'mi_bunny_2',age:1}
    ];
    //在这里定义$scope.condition和$scope.mode
    
 })