請多多指教！臨近過年放假了，都沒什麼心情整理了，就講講讀取數據吧！
使用的基本格式：
關於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", "");
}
随时随地看视频
