AngularJs 01
Posted 陈陈chenchen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的主要内容，如果未能解决你的问题，请参考以下文章