Render json in table using AngularJs

by deswolf

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
    <p>    Click <a ng-click="loadMessages()">here</a> to load data.</p>
<div>
    <div style="font-weight:bold;">
        <span>title</span>
        <span>fromuid</span>
        <span>title</span>
        <span>messcreated</span>
    </div>
    <div ng-repeat="msg in messageOP">
        <span title="{{msg.messOPid}}">{{msg.messTitle}}</span>
        <span>{{msg.uid}}</span>
        <span>{{msg.messDesc}}</span>
        <span>{{msg.messcreated}}</span>
    </div>
</div>
</div>
</div>

CSS

table {
  border: 1px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}

JavaScript

var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([{"messOPid":"1","messTitle":"Testing new Personal Tutorial System","uid":"2","toid":"1","messDesc":"lorem ipsum testing","messcreated":"2015-09-24 18:24:23"},{"messOPid":"2","messTitle":"Something else","uid":"2","toid":"1","messDesc":"lsdsdorem ipsum testing","messcreated":"2015-09-24 18:24:25"},{"messOPid":"3","messTitle":"Lorem ipsum","uid":"2","toid":"1","messDesc":"lforsdsem ipsum testing","messcreated":"2015-09-24 18:24:27"},{"messOPid":"4","messTitle":"Lorem ipsum test","uid":"2","toid":"1","messDesc":"heh","messcreated":"2015-09-24 18:24:29"}]));


var app = angular.module('myApp', []);

function PeopleCtrl($scope, $http) {

    $scope.messageOP = [];

    $scope.loadMessages = function() {
        var httpRequest = $http({
            method: 'POST',
            url: '/echo/json/',
            data: mockDataForThisTest

        }).success(function(data, status) {
            $scope.messageOP = data;
        });

    };

}