JSFiddle - React, Tailwind, and code Playground

by nmusmani

HTML

<div ng-app ng-controller="MyCtrl">
    <input type="search" placeholder="Name" ng-model="search.Name" />
    <select id="StatusID" name="statusID" ng-model="search.StatusID" ng-options="Status.StatusID as Status.StatusDesc for Status in StatusList">
        <option value="">All</option>
    </select>    
    <span>{{(itemList | filter:search).length}} out of {{itemList.length}} records.</span>
    <table>
        <tr>
            <th>Status Desc</th>
            <th>Status ID</th>
        </tr>
        <tr ng-repeat="item in itemList | filter:search">
            <td>{{item.Name}}</td>
            <td>{{item.StatusDesc}}</td>
            <td>{{item.StatusID}}</td>
        </tr>
    </table>
</div>

JavaScript

function MyCtrl($scope) {
    $scope.StatusList = [{
        StatusID: 0,
        StatusDesc: "New"
    }, {
        StatusID: 10,
        StatusDesc: "Enabled"
    }, {
        StatusID: 30,
        StatusDesc: "InProgess"
    }, {
        StatusID: 70,
        StatusDesc: "Done"
    }];

    $scope.itemList = [{
        Name: "Andrew Bolt",
        StatusID: 10,
        StatusDesc: "Enabled"
    }, {
        Name: "bryan Adams",
        StatusID: 10,
        StatusDesc: "Enabled"
    }, {
        Name: "Chris Brown",
        StatusID: 30,
        StatusDesc: "InProgess"
    }, {
        Name: "Adam Sandler",
        StatusID: 70,
        StatusDesc: "Done"
    }, {
        Name: "Ricky Stuart",
        StatusID: 70,
        StatusDesc: "Done"
    }, {
        Name: "Din Tai Fung",
        StatusID: 10,
        StatusDesc: "Enabled"
    }];

}