AngularJS:JSON data display
Parse a JSON object and display data inside view template.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.8.3/select.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.8.3/select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4/angular-sanitize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.min.css">
<div ng-app="myApp">
<div ng-controller="PeopleCtrl as ctrl">
<br>
<p> Click <a ng-click="ctrl.loadPeople()">here</a> to load data.</p>
<h2>Data</h2>
<div class="row-fluid">
<table class="table table-hover table-striped table-condensed">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in ctrl.people | filter: {status: ctrl.selected.value} : true">
<td>{{person.id}}</td>
<td>{{person.firstName}}</td>
<td>{{person.lastName}}</td>
<td>{{person.status}}</td>
</tr>
</tbody>
</table>
</div>
<br><br>
<div width="50px">
<ui-select tagging ng-model="ctrl.selected" theme="bootstrap">
<ui-select-match placeholder="Pick one...">{{$select.selected.value}}</ui-select-match>
<ui-select-choices repeat="val in ctrl.values | filter: $select.search track by val.value">
<div ng-bind="val.value | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
</div>
</div>
CSS
table {
border: 1px solid #666;
width: 100%;
}
th {
background: #f8f8f8;
font-weight: bold;
padding: 2px;
}
JavaScript
angular.module('myApp', ['ui.select'])
.controller("PeopleCtrl", function($http) {
var vm = this;
vm.people = [];
vm.loadPeople = function() {
$http({
method: 'POST',
url: '/echo/json/',
data: mockDataForThisTest
}).then(function(response, status) {
console.log(response.data);
vm.people = response.data;
});
};
vm.isLoaded = false;
vm.values = [{
'key': 1,
'value': 'available'
}, {
'key': 24,
'value': 'not available'
}];
vm.selected = {
key: null,
value: null
};
var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([{
id: 1,
firstName: "John",
lastName: "Rein",
status: 'available'
},
{
id: 2,
firstName: "David",
lastName: "Gumry",
status: 'not available'
}
]));
})