Custom Directives with JSON

Use of ng-class and ng-repeat

by Rajdeep Chandra

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="listDirective">
  <script type="text/ng-template" id="home.html">
    <div ng-class='(tckt.pr <= 80000) ? "panel panel-primary" : "panel panel-danger"'>
      <div class="panel-heading">
        <h3>{{}}</h3>
      </div>
      <div class="panel-body">
      <div class="row">
        <div class="col-sm-4">
          Ticket Id:
        </div>
        <div class="col-sm-8">
          {{tckt.id}}
        </div>
        </div>
        <div class="row">
        <div class="col-sm-4">
          Ticket Name:
        </div>
        <div class="col-sm-8">
          {{tckt.name}}
        </div>
        </div>
        <div class="row">
        <div class="col-sm-4">
          Ticket Price:
        </div>
        <div class="col-sm-8">
          {{tckt.pr}}
        </div>
        </div>
      </div>
    </div>
  </script>
  <div class="col-md-4" ng-repeat="tckt in tcktlist">
   <list-name></list-name>
  </div>
 
  </div>

JavaScript

var app = angular.module('newDirect', []);
app.controller('listDirective', ['$scope', function($scope) {
  $scope.tcktlist = [{
    id: 23223,
    name: "Rajdeep",
    pr: 80000
  }, {
    id: 3123,
    name: "Subhodeep",
    pr: 802323
  }, {
    id: 3322,
    name: "Chandra",
    pr: 100000
  }]
}]);
app.directive('listName', function() {
  return {
    templateUrl: 'home.html'
  }
});