請多多指教!臨近過年放假了,都沒什麼心情整理了,就講講讀取數據吧!
使用的基本格式:
關於get請求的:
$http.get(url).success(function(response){ //請求成功,response就是獲取的數據集合 }) .error(function(response){//請求失敗,失敗原因}) 或 $http({ method:'GET', url:"" }).then(function successCallback(respone){ //請求成功,respone.data就是獲取數據的集合;respone包含了返回的所有值包括返回的狀態。 } ,function errorCallback(respone){//請求失敗} )
對於只請求一個地址時直接使用即可;若是要循環請求,不能使用循環而是要使用不停的去調用。
獲取數據沒什麼難得,很多時候獲取的數據會在html中循環展示出來,就會使用到ng-repeat;
最常用的是用表格或者列表的形式;
展示出來的時候,有些需要按順序展示,就會使用到orderBy使用方法:orderBy:‘變量名’;
若是要反序的話:
$scope.title="status";
$scope.desc=true;
orderBy:title:desc
還有通過雙向數據綁定ng-model="search"過濾只顯示有關於它的:filter:search;
除此之外還有轉換為大小寫:uppercase和lowercase;
顯示序號的:$index;
<input type="text" class="search" placeholder="Search..." ng-model="search" > <table> <tr ng-repeat="x in data | orderBy : 'age' | filter:search "> <td>{{x.name}}</td> </tr> </table> <ul ng-repeat="x in data | orderBy : 'name'"> <li>{{x.age}}</li> </ul>
下面我就舉一個實例,把常用的一些功能都寫上:
創建一個json文件:Info.json;
文件內容:
[{"name":"小明","age":"23","sex":"boy","salary":"6300"},
{"name":"小花","age":"21","sex":"girl","salary":"4600"},
{"name":"小芳","age":"24","sex":"girl","salary":"5800"},
{"name":"小超","age":"25","sex":"boy","salary":"8800"}
]
2.html中:
<div ng-app="MyApp"> <div ng-controller="MyCtrl1"> //只顯示查詢的相關的數據 <input type="text" class="search" placeholder="Search..." ng-model="search" > <input type="button" value="批量刪除" ng-click="delAll()" class="checkbox1"> <select ng-model="Name" ng-change="select()"> <option value="">选择人名</option> <option value="小明">小明</option> <option value="小花">小花</option> <option value="小芳">小芳</option> <option value="小超">小超</option> </select> <table> <thead> <th><input type="checkbox" ng-click="checkAll" ng-model="check"></th> <th>序号</th> //<th>名字</th> //<th>年龄</th> //<th>性别</th> //<th>工资</th> <th ng-click="SortOrder('name')">名字</th> <th ng-click="SortOrder('age')">年龄</th> <th ng-click="SortOrder('sex')">性别</th> <th ng-click="SortOrder('salary')">工资</th> <th>操作</th> </thead> <tbody> //<tr ng-repeat="x in all | orderBy:'salary'| filter:search "> <tr ng-repeat="x in all | orderBy:title:desc |filter:search "> <td><input type="checkbox" ng-model="x.checked "></td> <td ng-bind="$index+1"></td> <td ng-bind="x.name"></td> <td ng-bind="x.age"></td> <td ng-bind="x.sex"></td> <td ng-bind="x.salary" ondblclick="ShowElement(this)"></td> <td><input type="button" value="刪除" ng-click="Delete(x.name)"> <input type="button" value="新增" ng-click="add()"> </td> </tr> </tbody> </table> <div ng-show="addShow"> <span>名字:</span><input type="text" ng-model="name"> <br> <span>年齡:</span><input type="text" ng-model="age"> <br> <span>性別:</span><input type="text" ng-model="sex"> <br> <span>工資:</span><input type="text" ng-model="salary"> <input type="button" value="確定" ng-click="ok()"> </div> </div> </div>
3.js中:
var app=angular.module("MyApp",[]); app.controller("MyCtrl1",function($scope,$http){ $scope.all=[]; $scope.alls=[]; $http.get("Info.json").success(function(response){ $scope.all=response; $scope.alls= $scope.all; // console.log(response); }) .error(function(response){ alert("請求獲取數據失敗") }); //若是通過表頭來排序 $scope.desc=true; $scope.SortOrder = function(column){ $scope.desc=!$scope.desc; $scope.title=column; }; //刪除相應行的數據 $scope.Delete=function (value) { for (var i = 0; i < $scope.all.length; i++) { if ($scope.all[i].name == value) { $scope.all.splice(i, 1);//删除 } } } //增加新的數據 $scope.add=function () { $scope.addShow=true; $scope.ok=function () { var temp={}; temp.name=$scope.name; temp.age=$scope.age; temp.sex=$scope.sex; temp.salary=$scope.salary; $scope.all.push(temp); console.log( $scope.all); $scope.addShow=false; } } //全選或者反選 $scope.checkAll=function () { var ck = $scope.check; for(var i=0; i<$scope.all.length; i++){ $scope.all[i].checked = ck; } } //批量刪除 $scope.delAll = function(){ for(var i=0; i<$scope.all.length; i++){ if($scope.all[i].checked==true){ $scope.all.splice(i,1); i--; } } } //通過單選列表來曬出數據 $scope.select= function(){ $scope.all= []; var val = $scope.Name; var f = $filter("filter"); $scope.all= f($scope.alls,{"name":val}); } }) //双击修改表格中元素 function ShowElement(element) { var oldhtml = element.innerHTML; //创建新的input元素 var newobj = document.createElement('input'); //为新增元素添加类型 newobj.type = 'text'; //为新增元素添加value值 newobj.value = oldhtml; //为新增元素添加光标离开事件 newobj.onblur = function() { //当触发时判断新增元素值是否为空,为空则不修改,并返回原有值 element.innerHTML = this.value == oldhtml ? oldhtml : this.value; //当触发时设置父节点的双击事件为ShowElement element.setAttribute("ondblclick", "ShowElement(this);"); } //设置该标签的子节点为空 element.innerHTML = ''; //添加该标签的子节点,input对象 element.appendChild(newobj); //设置选择文本的内容或设置光标位置(两个参数:start,end;start为开始位置,end为结束位置;如果开始位置和结束位置相同则就是光标位置) newobj.setSelectionRange(0, oldhtml.length); //设置获得光标 newobj.focus(); //设置父节点的双击事件为空 newobj.parentNode.setAttribute("ondblclick", ""); }