angularJS accordion

angularJS accordion with json data

by ndw5015

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<body ng-app="ngtestapp">
 <div ng-controller="ngTestController">
      <div class="container-fluid">
    <accordion close-others="true">
    <accordion-group ng-repeat="group in feedbackGroup" heading="{{group.title}}" is-open="group.open">
      <ul class="list-group">
      <li class="list-group-item" ng-repeat="comment in userComments track by $index | orderBy:comment.DateCreated">
        <span class="badge" ng-bind="comment.DateCreated | date:'shortDate'"></span>
        <strong ng-bind="comment.CreatedByDisplayName">Username</strong> <p ng-bind="comment.Message">comment</p>
      </li>
      </ul>
    </accordion-group>
          <accordion-group is-open="false" heading="Other">
            <textarea class="form-control input-sm" ng-model="userTaskNote" placeholder="Add a task note here..."></textarea>
          </accordion-group>
    </accordion>
      </div>
  </div>
  </body>

CSS

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

JavaScript

var ngtestapp = angular.module("ngtestapp", ['ui.bootstrap']);

ngtestapp.controller("ngTestController", function ($scope) {
    $scope.userComments = [
        {
            RowId: 123,
            DateCreated: new Date(2015, 1, 2, 0, 0, 0, 0),
            CreatedBy: 564,
            Message: 'Carpe Dieum',
            CreatedByDisplayName: 'Daniel Graham'
        },
        {
            RowId: 124,
            DateCreated: new Date(2015, 1, 5, 0, 0, 0, 0),
            CreatedBy: 562,
            Message: 'That was awesome',
            CreatedByDisplayName: 'Peter Griffin'
        }
    ];
    $scope.feedbackGroup = [{ title: "User Comments", open: false }];
    $scope.$watch('feedbackGroup', function (feedbackGroup) {
        if (feedbackGroup[0].open) {
            console.log("opened feedback group.");
        } else {
            console.log("closed feedback group.");
        }
    }, true);
    $scope.userTaskNote = "user task test note";
});