JSFiddle - React, Tailwind, and code Playground

by jnthnjns_

HTML

<strong>Example 1</strong>
<br/>
<input type="button" value="set" ng-click="myStyle1={color:'red'}">
<input type="button" value="clear" ng-click="myStyle1={}">
<br/> <span ng-style="myStyle1">Sample Text</span>
<br/>
<br/> <strong>Example 2</strong>
<br/> <span>Select color : </span>

<select ng-model="myColor">
    <option value="">None</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
</select>

<div ng-style="{'color':myColor}">
    <p>{{title}}</p>
    <p>Total number of customers: {{customers.length}}</p>Search:
    <input ng-model="query">Sort by:
    <select ng-model="orderProp">
        <option value="name">Alphabetical</option>
        <option value="age">Youngest</option>
    </select>
    <ul>
        <li ng-repeat="customer in customers | filter:query | orderBy:orderProp">{{customer.name}},{{customer.age}}</li>
    </ul>
    <button id="clear-filter" ng-click="clearFilter()" type="button">Clear Filter</button>
    <br/>Add more customers:
    <input type="text" ng-model="newCustomer">
    <input type="text" ng-model="age">
    <button ng-click="addCustomer()">Add</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="script.js"></script>

JavaScript

function CustomerListCtrl($scope) {
    $scope.title = "List of customers";
    $scope.customers = [{
        "name": "Jaimin",
        "age": "26"
    }, {
        "name": "Chaitanya",
        "age": "28"
    }];
    $scope.clearFilter = function () {
        $scope.query = '';
        $scope.orderProp = '';
        $scope.myColor = '';
    };
    $scope.addCustomer = function () {
        var a = {};
        a['name'] = $scope.newCustomer;
        a['age'] = $scope.age;
        $scope.customers.push(a);
    };
}