1.tab栏切换（ng-click、ng-switch on、ng-switch-when、ng-class）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.current{
background: red;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="controller">
<nav>
<!-- ng-class="{类名:布尔值}" true时添加这个类名，false不添加这个类名；此时的type表示$scope.type -->
<a href="#" ng-click="switch('local')" ng-class="{current:'local'==type}">国内新闻</a>
<a href="#" ng-click="switch('global')" ng-class="{current:'global'==type}">国际新闻</a>
<a href="#" ng-click="switch('sport')" ng-class="{current:'sport'==type}">体育新闻</a>
</nav>
<!-- 这个type指的是$scope.type -->
<div ng-switch on="type">
<!-- 当ng-switch on和ng-switch-when中对应的数据一样时，才会显示 -->
<div ng-switch-when="local">国内新闻国内新闻国内新闻国内新闻</div>
<div ng-switch-when="global">国际新闻国际新闻国际新闻国际新闻</div>
<div ng-switch-when="sport">体育新闻体育新闻体育新闻体育新闻</div>
</div>
</div>
<script src="angularjs/angularjs.js"></script>
<script>
var app=angular.module("app",[]);
app.controller("controller",["$scope",function($scope){
$scope.switch=function(type){
$scope.type=type;
}
}]);
</script>
</body>
</html>
2.待办事项：在输入框输入事项，添加到未完成事项中；点击事项表示已完成添加到已完成事项中
（ng-submit、ng-model双向数据绑定、ng-repeat循环、ng-checked、ng-click、截取数组方法splice）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="app">
<div ng-controller="controller">
<!-- 添加事项 -->
<div>
<!-- input框输入事项后，回车就将数据传入model，这个事件用form表单中的submit事件 -->
<!-- add函数里面传不传name都可以，因为name此时已经是$scope.name双向数据绑定，在model直接使用$scope.name即可 -->
<!-- <form action="" ng-submit="add(name)"> -->
<form action="" ng-submit="add()">
<input type="text" ng-model="name"></form>
<div>
<ul>
<!-- 循环写在要循环创建的标签上 -->
<!-- 点击input后会完成该事项 -->
<li ng-repeat="(key,todo) in todos">
<!-- 点击事件要把key传过去，因为你点击的哪一个得告诉 model,model再把这个数据添加到已完成 -->
<input type="checkbox" ng-checked="todo.flag" ng-click="finish(key)">
<label for="">{{todo.name}}</label>
</input>
<!-- 和上面input点击事件一样，要传个key来表示你删除的是哪一个 -->
<button ng-click="delete(key)">删除</button>
</li>
<!-- 上下两个一个用cheakbox一个就直接显示，都要添加点击事件，一点击就代表已完成，把这个添加到已完成 -->
<!-- <li ng-repeat="(key,todo) in todos" ng-click="finish(key)">
{{todo.name}}
</li> -->
</ul>
</div>
</div>
<!-- 已完成事项 -->
<div>
<h5>已完成</h5>
<ul>
<li ng-repeat="(key,val) in dones">
<!-- 点击事件要把key传过去，因为你点击的哪一个得告诉 model,model再把这个数据添加到已完成 -->
<input type="checkbox" ng-checked="val.flag">
<label for="">{{val.name}}</label>
</input>
</li>
</ul>
</div>
</div>
<script src="angularjs/angularjs.js"></script>
<script>
var app=angular.module("app",[]);
app.controller("controller",["$scope",function($scope){
// 待办事项是一个数组，每次add就给里面增加内容
$scope.todos=[];
$scope.add=function(){
$scope.todos.push({"name":$scope.name,"flag":false});
// 添加完之后清空input中的数据
$scope.name="";
}
// 已完成数组
$scope.dones=[];
$scope.finish=function(key){
// 待办事项数组中要把这个key值数据删掉并添加进已完成数组，用splice,用过之后返回值还是一个数组，里面只有一个数据，所以要取【0】
$scope.done=$scope.todos.splice(key,1)[0];
$scope.dones.push({"name":$scope.done.name,"flag":true});
}
$scope.delete=function(key){
// 删除数据
$scope.todos.splice(key,1);
}
}])
</script>
</body>
</html>
3.$http
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="app">
<div ng-controller="controller">
</div>
<script src="angularjs/angularjs.js"></script>
<script>
var app=angular.module("app",[]);
app.controller("controller",["$scope","$http",function($scope,$http){
$http({
url: 'example.php',
// 这是get请求方式：传递参数必须用params，会把name=itcast添加到url后面，数据是query string parameters格式（key=value的格式）
// method:"get",
// params:{
// "name":"itcast"
// }
// 这是post请求方式：传递参数必须用data，且angularjs不会把对象形式的参数转换成name=itcast，（get直接就是这个格式），所以传入的一定要是这个格式。数据是form data格式
method: 'post',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: 'name="itcast"' // post 传参
}).success(function (info) {
console.log(info);
});
}]);
</script>
</body>
</html>
4.
6731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
