JSFiddle - React, Tailwind, and code Playground

by apaichon

HTML

<div ng-app="" ng-controller="personController">


    <p> First Name : {{person.firstName | uppercase}}</p>   
    <p> Last Name : {{person.lastName | lowercase}} </p>
    
  <input type="number" ng-model="quantity">
<input type="number" ng-model="price">

<p>Total = {{ (quantity * price) | currency }}</p> 

    <ul>
  <li ng-repeat="x in countries | orderBy:'country'">
     {{ "id" + x.id + ":" + x.country }}
  </li>
</ul>
    
 
    <p><input type="text" ng-model="name"></p>

<ul>
  <li ng-repeat="x in countries | filter:name | orderBy:'country'">
    {{  x.country | uppercase }}
  </li>
</ul>
    
    
    <script >

        
        
function personController($scope) {
    $scope.person = {
        firstName: "Oliver",
        lastName: "Queen",
        
     };
  $scope.countries =[ {id:1, country:"Thailand"} 
        ,{id:2 , country:"Japan"} 
        ,{id:3,country:"USA"} ,
        {id:4,country:"England"}
        ,{id:5,country:"Russia"} ,
        {id:6 ,contry:"Korea" ,id:7,country:"Hongkong"}
        ];
     
      
}
</script>
</div>