ng-bind-html demonstrate

by Ebin Manuval

HTML

<div ng-app="myapp"  ng-controller="leagueFixure">
  <ul class="matches" ng-repeat="matchPerTeam in fixureDataToFilter() | filter:filterTeams">
    <li class="rowgray daytime">{{matchPerTeam.match_day}}</li>
       <ul class="row match" ng-repeat="match in fixureData | filter:{match_day: matchPerTeam.match_day}">
           <li class="matchtime" ng-bind-html="match.time| trustAs">
           </li>
           <li class="team2">{{match.home}}</li>
           <li class="result">{{match.homepoint}} - {{match.awaypoint}}</li>
           <li class="team1">{{match.away}}</li>
       </ul>
  </ul>
</div>

CSS

.showDiffTags {
    border: 1px solid black;
    padding:5px;
    width:150px;
}
.showDiffTags div{
    margin-bottom:5px;
}
.showDiffTags span{
    font-size: 12px;
    color:#333;
}

JavaScript

var myapp = angular.module('myapp', []);
myapp.controller('leagueFixure', function($scope, $http, $sce) {

$scope.fixureData = [{"home":"test","away":"test2","time":"<td>44<\/td>","homepoint":"2","awaypoint":"1","match_day":"22/2/2016"},{"home":"test3","away":"test4","time":"<td>45<\/td>","homepoint":"2","awaypoint":"0","match_day":"23/2/2016"}];
var indexedTeams = [];

$scope.fixureDataToFilter = function() {
                    indexedTeams = [];
                    return $scope.fixureData;
                }
$scope.filterTeams = function(match) {
 var match_dayIsNew = indexedTeams.indexOf(match.match_day) == -1;
                    if (match_dayIsNew) {
                        indexedTeams.push(match.match_day);
                    }
                    return match_dayIsNew;
                }

})
.filter('trustAs', ['$sce', 
        function($sce) {
            return function (input, type) {
                if (typeof input === "string") {
                    return $sce.trustAs(type || 'html', input);
                }
                console.log("trustAs filter. Error. input isn't a string");
                return "";
            };
        }
    ]);