AngularJs 01
【原創】
先上源碼吧！
<!DOCTYPE html>
<html lang="en" ng-app="todoList">
<head>
<meta charset="UTF-8">
<title>todoList</title>
<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body style="padding:10px;" ng-controller="TaskCtrl">
<div class="input-group">
<input ng-model="task" type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="add()">提交</button>
</span>
</div>
<h4 ng-if="tasks.length>0">任務列表</h4>
<ul class="list-group">
<li ng-repeat="item in tasks track by $index" class="list-group-item">{{item}}
<a ng-click="tasks.splice($index,1)">[刪除]</a>
</li>
</ul>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
angular.module(‘todoList‘,[])//聲明
.controller(‘TaskCtrl‘,function($scope){
$scope.task="";
$scope.tasks=[];
$scope.add=function(){
$scope.tasks.push($scope.task);
}
})
</script>
</html>
（原諒我是跟著極客學院的視頻學習的，，QAQ）
心得體會：
其中
----1---- ng-app 指令用於告訴 AngularJS 應用當前這個元素是根元素。（我的理解是通過ng-app來管理頁面）
所有 AngularJS 應用都必須要要一個根元素。
HTML 文檔中只允許有一個 ng-app 指令，如果有多個 ng-app 指令，則只有第一個會被使用。
----2---- 如果將ng-repeat="item in tasks track by $index"寫成ng-repeat="item in tasks"，那麽會發現在輸入框中輸入已存在的字符，那麽會發現頁面的審查元素中是有報錯的，例如輸入“aaa”，然而之前已經輸入過“aaa”，會發現任務列表並沒有增加記錄，因為js數組中是不允許添加相同元素的，這時候需要通過下標來讀取數組
----3---- 當在script中聲明了controller之後，要在body體內綁定該名稱，.controller(‘TaskCtrl‘,function($scope)，我在body體內有綁定，即ng-controller="TaskCtrl"
----4---- 在對於沒有元素存在時希望不顯示任務列表，，此時有兩種方法ng-if="tasks.length>0"和ng-hide="tasks.length==0"
ng-if="tasks.length>0"性能效果高，因為ng-hide="tasks.length==0"不管判斷條件是否成立都要在element中先生成標簽
=============bing指令的雙向綁定==============
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js">
</head>
<body style="padding:10px;" ng-app="">
<div>
<input type="text" ng-model="uname">
<h1 ng-clock class="ng-clock">{{uname}}</h1>
<div ng-bind="‘用戶名：‘+uname"></div>
<div class="{{uname}}">{{uname}}</div>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
// angular.module(‘app‘,[])
// .controller(‘MyCtrl‘,function($scope){
// $scope.msg="angulr";
// });
</script>
</html>
=========controller的使用============
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js">
</head>
<body style="padding:10px;" ng-app="app">
<div ng-controller="MyCtrl">
<h1>{{msg}}</h1>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="MyCtrl.js">
</script>
</html>
js部分：
angular.module(‘app‘,[])
.controller(‘MyCtrl‘,function($scope){
$scope.msg="angulr";
});
========在$scope中變量和方法的使用========
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js">
</head>
<body style="padding:10px;" ng-app="app">
<div ng-controller="MyCtrl">
<input type="text" ng-model="user.uname">
<input type="text" ng-model="user.pwd">
<!-- <h1>{{reverse()}}</h1> -->
<button ng-click="login()">登陸</button>
<div ng-show
="errormsg.length>0" class="alert-box">{{errormsg}}</div>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="MyCtrl.js">
</script>
</html>
js部分：
angular.module(‘app‘,[])
.controller(‘MyCtrl‘,function($scope){
$scope.msg="";
$scope.user={uname:‘‘,pwd:‘‘};
$scope.erroemsg="";
$scope.reverse=function(){
return $scope.msg.split("").reverse().join("");
}
$scope.login=function(){
// console.log($scope.user);
// alert($scope.user.uname);
if($scope.user.uname=="admin" && $scope.user.pwd=="123"){
alert("success");
}else{
$scope.errormsg="wrong";
}
}
});
AngularJs 01