Angular js 學習文件
Angular js 指令：
ng-app=”” 初始化一個Angularjs應用程式
ng-init=”key=value” 在其中使用鍵值對定義資料
{{key}} 在html中使用key呼叫資料
ng-bind=”key” 可以在標籤中使用此方法呼叫資料 相當於append
ng-model 把元素值繫結到應用程式 一般出現在文字框中 定義key 然後把輸入的值顯示
Ng-model同樣可以為應用程式資料提供型別驗證、為應用程式提供狀態、為html元素提供css類、繫結html元素到html表單
Ng-repeat 迴圈陣列 把陣列中的元素迴圈放在html中 相當於for
頁面程式碼：
<div ng-app="myApp" ng-controller="personCtrl">
名：<input type="text" ng-model="firstname" name="name" value=" " /><br />
姓：<input type="text" ng-model="lastname" name="name" value=" " /><br />
<br />
姓名{{fullname()}}
</div>
AngularJs程式碼：
var app = angular.module("myApp", []);
app.controller('personCtrl', function ($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
$scope.fullname = function () {
return $scope.firstname + " " + $scope.lastname;
}
})
其中 app是anjularjs的作用域
app.controller是定義控制器中的具體操作
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
通過內建的$location服務獲取當前頁面的URL
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http.post("/Home/ReturnJson")
.success(function(response) {$scope.num = respose.data;
});
})
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<td>編號</td>
<td> 姓名</td>
<td>年齡</td>
</tr>
<tr ng-repeat="x in num">
<td> {{x.ID}}</td>
<td> {{x.Name}}</td>
<td> {{x.Age}}</td>
</tr>
</table>
</div>
通過get/post 獲取後臺的資料 然後通過ng-repeat迴圈遍歷資料放入頁面
相當於使用ajax獲取資料 然後通過拼接字串放入Dom節點中（推薦使用）
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $timeout) {
$scope.myHeader = "Hello World";
$timeout(function() {
$scope.myHeader = "How are you today?";
},2000)
})
</script>
$timeout 訪問在規定的毫秒數後執行指定函式。
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $interval) {
$interval(function() {
$scope.theTime = new Date().toLocaleTimeString();
},1000)
})
</script>
$interval 訪問在指定的週期(以毫秒計)來呼叫函式或計算表示式。
app.service('change', function () {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope,change) {
$scope.hex = change.myFunc(255);
})
自定義服務並呼叫 change：服務名稱 myFunc：服務具體執行函式
頁面中使用多個angular js 在<body>中加入ng-app 在<div>中加入ng-controller
app.service('change', function () {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat', ['change', function (change) {
return function (x) {
return change.myFunc(x);
}
}]);
app.controller('myCtrl1', function ($scope) {
$scope.counts = [255, 251, 200];
});
<div ng-controller="myCtrl1">
<ul ng-repeat="y in counts">
<li>{{y|myFormat}}</li>
</ul>
</div>
通過filter建立驗證 myFormat為驗證名稱 change為驗證方法名稱 myFunc為具體驗證方法
通過{{y|myFormat}}使用
<select ng-model="selectedName" ng-options="x for x in json"></select> 通過此行程式碼程式碼可以將資料繫結到下拉框
<select ng-model="selectedsite" ng-options="x.site for x in json"></select>繫結json
angularjs表格：
可以通過orderBy過濾器進行排序
使用{{$index+1}}作為序號
使用$even和$odd可以進行按首字母順序排列
表單驗證：使用ng-show顯示驗證資訊 驗證屬性如下：
angular js api
