JSFiddle - React, Tailwind, and code Playground

by Ankit Patidar

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div ng:app="myApp">
   <div ng-controller="HelloCntl">
     <ul>
        <li ng-repeat="friend in friends">
            <span ng-bind-html="friend.name | customFilter"></span>
            <span>{{friend.phone}}</span>
        </li>
     </ul>


     <div>    
        <div ng-repeat="item in items" item-list>
            <div class="col-xs-4 object-list-container">
                <div class="object-list" >
                    <p ng-bind-html="item.name"></p>
                </div>
            </div>
        </div>    
    </div>
  </div>
</div>

JavaScript

var app = angular.module('myApp', []) .filter('customFilter', function ($sce) {
            return function (number) {
                if (isNaN(number) || number > 1) {
                    return number;
                } else {
                    if (number === 1) {
                        return $sce.trustAsHtml("&#x2714;");
                    } else if (number === 0) {
                        return $sce.trustAsHtml("&#x2718;");
                    }
                }
            }
        });

function HelloCntl($scope) {
    $scope.friends = [
        {
        name: 0,
        phone: '555-1276'},
    {
        name: 0,
        phone: '800-BIG-MARY'},
    {
        name: 1,
        phone: '555-4321'},
    {
        name: 2,
        phone: '555-5678'},
    {
        name: 2,
        phone: '555-8765'}
    ];
}
// Controller for Nav
app.controller('NavController', function ($scope,$http) {
		

   $scope.saveChanges=function(){
            alert($scope.company);

    };
    
    
});