Online AngularJS Editor

Browse more Angularjs Examples
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
<style>
    table,tr,th,td{
        border:2px solid;
        border-collapse:collapse;
        padding:2px;
        width:500px;
        height:50px;
        text-align:center;
    }
    th{
        cursor:pointer;
    }
    .button{
        float:left;
        height:20px;
        width:100px;
        text-align:center;
    }
</style>

Search:
<input type="text" placeholde="search" ng-model="searchtext">

Order By:
    <select ng-model="sortColumn">
    <option value="fName">fName</option>
    <option value="lName">lName</option>
    <option value="likes">likes</option>
</select>
<br/><br/>
<table>
    <tr>
    <th>fName</th>
    <th>lName</th>
    <th>likes</th>
    <th>dislikes</th>
    <th>likes/dislikes</th>
    </tr>
    <tr ng-repeat="rec in records | orderBy:sortColumn:revSort">
    <td>{{rec.fName}}</td>
    <td>{{rec.lName}}</td>
    <td>{{rec.likes}}</td>
    <td>{{rec.dislikes}}</td>
    <td>
        <input class="button" type="button" value="Like" ng-click="incLikes(rec)"><br/>
        <input class="button" type="button" value="Dislike" ng-click="incDisLikes(rec)">
    </td>
    </tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  var records = [
    {fName:"Ash",lName:"reddy",likes:0,dislikes:0},
    {fName:"rohith",lName:"sharma",likes:0,dislikes:0},
    {fName:"value",lName:"labs",likes:0,dislikes:0}
    ];
    $scope.records=records;
    $scope.sortColumn="fName";
    $scope.incLikes=function(rec){
        rec.likes++;
    }
    $scope.incDisLikes=function (rec){
        rec.dislikes++;
    }


});
</script>

</body>
</html>
Online AngularJS Editor

Follow

Newsletter
