Angular js基礎知識

請多多指教！臨近過年放假了，都沒什麼心情整理了，就講講讀取數據吧！

使用的基本格式：

關於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>

下面我就舉一個實例，把常用的一些功能都寫上：

1. 創建一個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", "");

}