http請求json資料1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#sd {
border-radius: 10px; /*圓角邊框 */
background-image: url(img/ss.jpg);
background-position: right;
background-repeat: no-repeat;
}
label {
display: block;
}
span {
color: red;
}
</style>
<script src="js/angular.min.js"></script>
<script>
angular.module("gaoyn", [])
.controller("democ", function($scope, $http) {
$scope. add_sex='男';
//$http請求網路上的資料 get():請求指定路徑的資料
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.then(function(d) { //d---->網址返回資料
// $scope.persons ==>檢視中遍歷的物件
$scope.persons = d.data; //json串 根據鍵獲取值 物件.鍵名
});
//每行遍歷都會呼叫getAge 傳進來出生日期, 在函式
$scope.getAge = function(bir) {
var b = new Date(bir).getYear(); //出生的年份
var nowb = new Date().getYear();
return nowb - b;
}
$scope.del = function(id) { //js刪除 只能根據索引刪除
//根據id查詢id所對應索引
var index = 0;
for(var i in $scope.persons) {
if($scope.persons[i].id == id) {
index = i;
}
}
//彈框確認是否刪除
var f = confirm("確定刪除嗎?");
if(f) {
$scope.persons.splice(index, 1);
}
}
$scope.ckall1 = function() {
console.log($scope.persons);
// 遍歷陣列,讓陣列的物件狀態是否選中----->頂層的複選框
for(var i in $scope.persons) {
$scope.persons[i].ck = $scope.ckall;
}
}
$scope.delAll = function() {
for(var i = 0; i < $scope.persons.length; i++) {
if($scope.persons[i].ck) { //判斷當前行是否被勾選,如果勾選則進行刪除操作
$scope.persons.splice(i, 1); //刪除完畢後,下個物件自動移動到當前索引
i--;
}
}
}
$scope.getDname = function(dname) { //每行顯示之前都自動呼叫getDname dname是當前行對應部門名稱
//獲取 部門查詢輸入框 的值
if($scope.seldepart == undefined || $scope.seldepart == "") { //判斷無條件過濾,使其全部顯示
return true; //return 結束方法的作用
}
//dname中 是否含有 輸入框輸入部分字元 var i= "我是八維講師".indexOf("八維");
if(dname.indexOf($scope.seldepart) > -1) {
return true;
}
return false;
}
$scope.save = function() {
//存放錯誤提示資訊的陣列
$scope.errors = [];
if($scope.add_uname == undefined || $scope.add_uname == "") {
$scope.val_uname = true; //val_uname 控制使用者名稱不合法是否顯示
$scope.errors.push(1);
} else {
$scope.val_uname = false;
}
var obj_d; //部門物件
if($scope.add_dname==undefined||$scope.add_dname==""){
$scope.errors.push(4);
}else{
/*判斷部門所在物件,組裝物件 */
if($scope.add_dname=="市場部"){
obj_d={id:1,name:$scope.add_dname};
}else if($scope.add_dname=="研發部"){
obj_d={id:2,name:$scope.add_dname};
}
}
//新增
if($scope.errors.length == 0) {
$scope.persons.push({
"salary": $scope.add_salar,
"birthday": $scope.add_birth.valueOf(), //獲取date日期的毫秒數
"department": obj_d,
"gender": $scope.add_sex,
"id": $scope.persons.length+100,
"name": $scope.add_uname
}
);
console.log($scope.persons)
}
}
})
</script>
</head>
<body ng-app="gaoyn" ng-controller="democ">
<!--頁面無資料時顯示資料 -->
<h1 ng-show="persons.length==0">
頁面無操作資料
</h1>
<!-- 如果有資料則顯示table和表頭 -->
<div ng-show="persons.length>0">
<table border="1px">
<tr>
<td colspan="7">
<input type="checkbox" ng-model="ckall" ng-click="ckall1()" />
<button ng-click="delAll()">批量刪除</button>
<input id="sd" ng-model="seldepart" placeholder="根據部門模糊查詢" />
<button ng-click="showAdd=true">新增使用者</button>
</td>
</tr>
<tr ng-repeat="d in persons|orderBy:'+birthday'" ng-show="getDname(d.department.name)">
<td><input type="checkbox" ng-model="d.ck" /> </td>
<td>{{d.name}}</td>
<td>{{getAge(d.birthday)}}</td>
<td>{{d.gender}}</td>
<td>{{d.salary|currency:"¥:"}}</td>
<td>{{d.department.name}}</td>
<td>{{d.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td><button ng-click="del(d.id)">刪除</button></td>
</tr>
</table>
</div>
<div ng-show="showAdd">
<label>
使用者名稱:<input type="text" ng-model="add_uname" placeholder="請輸入使用者名稱" /><span ng-show="val_uname">使用者名稱不合法</span>
</label>
<label>
工資:<input type="number" ng-model="add_salar" placeholder="請輸入工資" /><span ng-show="val_salary">工資不合法</span>
</label>
<label>
生日:<input type="date" ng-model="add_birth" />
</label>
<label>
性別:
<input type="radio" ng-model="add_sex" value="男" />男
<input type="radio" ng-model="add_sex" value="女" />女
</label>
<label>
<select ng-model="add_dname">
<option value="">-請選擇部門-</option>
<option>市場部</option>
<option>研發部</option>
</select>
</label>
<button ng-click="save()">儲存</button>
</div>
</body>
</html>