JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container" ng-app="myApp">
<div class="col-md-12" ng-controller="myController as my">
<h1>八仙氣爆案傷者送醫資料查詢</h1>
<div class="margin-bottom-10">
<input type="text" class="form-control" placeholder="輸入要搜尋的關鍵字 ex:姓名,縣市" ng-model="my.search" />
</div>
<p class="alert alert-warning">最後更新時間:{{my.datas.lastmodify}},資料來源 北市府資訊局</p>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>編號</th>
<th>縣市別</th>
<th>收治單位</th>
<th>檢傷編號</th>
<th>姓名</th>
<th>性別</th>
<th>國籍</th>
<th>年齡</th>
<th>醫療檢傷</th>
<th>救護檢傷</th>
<th>即時動向</th>
<th>轉診註記</th>
<th>刪除註記</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in my.datas.data | filter:my.search">
<td>{{data['編號']}}</td>
<td>{{data['縣市別']}}</td>
<td>{{data['收治單位']}}</td>
<td>{{data['檢傷編號']}}</td>
<td>{{data['姓名']}}</td>
<td>{{data['性別']}}</td>
<td>{{data['國籍']}}</td>
<td>{{data['年齡']}}</td>
<td>{{data['醫療檢傷']}}</td>
<td>{{data['救護檢傷']}}</td>
<td>{{data['即時動向']}}</td>
<td>{{data['轉診註記']}}</td>
<td>{{data['刪除註記']}}</td>
</tr>
</tbody>
</table>
</div>
...
CSS
.table-responsive{
height:500px;
}
.margin-bottom-10{
margin-bottom:10px;
}
JavaScript
var app = angular.module('myApp', []).controller('myController', ['$scope', '$http', controller]);
function controller($scope, $http) {
var vm = this;
vm.datas = {};
vm.loadData = function () {
$http.get('https://gist.githubusercontent.com/tony1223/098e45623c73274f7ae3/raw')
.success(function (res) {
vm.datas = angular.fromJson(res);
$scope.$apply();
});
};
vm.loadData();
}