angularJs模块对象，常用指令
同一个模块中生成两个作用域对象，数据显示相互不影响
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>模块对象测试</title>
</head>
<body ng-app="myApp">
<div ng-controller="myControllerName">
<input type="text" ng-model="testName" />
<p>用户名:{{testName}}</p>
</div>
<div ng-controller="myControllerPwd">
<input type="text" ng-model="testPwd"/>
<p>密码:{{testPwd}}</p>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
//创建模块对象，给两个参数，一个是模块对象的名字(即ng-app的内容)，另一个是依赖，没有依赖放空数组
var app=angular.module("myApp",[]);
//生成作用域对象
app.controller("myControllerName",function($scope){
$scope.testName="qiuxie";
})
app.controller("myControllerPwd",function($scope){
$scope.testPwd="123456";
})
</script>
</html>
代码优化
<script>
//创建模块对象，给两个参数，一个是模块对象的名字(即ng-app的内容)，另一个是依赖，没有依赖放空数组
angular.module("myApp",[])
.controller("myControllerName",function($scope){
$scope.testName="qiuxie";
})
.controller("myControllerPwd",function($scope){
$scope.testPwd="123456";
})
</script>
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>常用指令测试</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h2>价格计算器(自动)</h2>
<p>数量:
<input type="number" ng-model="count" />
价格:
<input type="number" ng-model="price"/>
</p>
<p>
总计:{{count*price}}
</p>
</div>
<div ng-controller="myCtrlHand">
<h2>价格计算器(手动)</h2>
<p>数量:
<input type="number" ng-model="count" />
价格:
<input type="number" ng-model="price"/>
</p>
<button ng-click="cal()">计算</button>
<p>
总计:{{totalPrice}}
</p>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module('myApp',[])
.controller('myCtrl',function($scope){
$scope.count=1;
$scope.price=20;
})
.controller('myCtrlHand',function($scope){
$scope.cal=function(){
$scope.totalPrice=$scope.count*$scope.price;
}
})
</script>
</html>
数据列表展示
<div ng-controller="myCtrlList">
<h2>人员信息列表</h2>
<ul>
<li ng-repeat="person in personList">
{{$index}}--{{person.name}}--{{person-pwd}}
</li>
</ul>
</div>
.controller("myCtrlList",function($scope){
$scope.personList=[
{name:"asas",pwd:"1221"},
{name:"dfd",pwd:"46456"},
{name:"ghgh",pwd:"9898"},
{name:"tyty",pwd:"454"},
{name:"vbvb",pwd:"767"}
];
})
<div ng-controller="myCtrlList">
<h2>人员信息列表</h2>
<ul>
<li ng-repeat="person in personList">
<!--$middle表示中间的意思-->
<!--$odd表示基数-->
<!--$even表示偶数-->
{{$even}}--{{$odd}}--{{$middle}}--{{$index}}--{{person.name}}--{{person.pwd}}
</li>
</ul>
</div>
<!--ng-bind处理数据闪屏问题-->
<div>
<p>{{123}}</p>
<p ng-bind="123"></p>
</div>
<div ng-controller="switchLikeCtrl"> <button ng-click="switchLike()">切换喜欢</button> <p ng-show="isLike">我喜欢吃草莓</p> <p ng-hide="isLike">我不喜欢吃栗子</p> </div>
.controller("switchLikeCtrl",function($scope){
console.log("开始切换...")
$scope.isLike=true;
$scope.switchLike=function(){
$scope.isLike=!$scope.isLike;
}
})
ng-style使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<!--ng-style动态引用通过js指定的样式对象-->
<div ng-style="myStyle">
菜鸟教程
</div>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module("myApp",[])
.controller("myCtrl",function($scope){
$scope.myStyle={
"width": "200px",
"height": "200px",
"background":"red",
}
});
</script>
</html>
鼠标进入和离开
<div ng-controller="myCtrl"> <!--ng-style动态引用通过js指定的样式对象--> <div ng-style="myStyle" ng-mouseenter="enter()" ng-mouseleave="lev()"> 菜鸟教程 </div> </div>
$scope.enter=function(){
this.myStyle.background='yellow';
}
$scope.lev=function(){
this.myStyle.background='deepPink';
}
ng-class使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.evenB{
background: red;
}
.oddB{
background: yellowgreen;
}
</style>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<li ng-class="{evenB:$even,oddB:$odd}" ng-repeat="person in personList">
<!--$middle表示中间的意思-->
<!--$odd表示基数-->
<!--$even表示偶数-->
{{$even}}--{{$odd}}--{{$middle}}--{{$index}}--{{person.name}}--{{person.pwd}}
</li>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module("myApp",[])
.controller("myCtrl",function($scope){
$scope.personList=[
{name:"asas",pwd:"1221"},
{name:"dfd",pwd:"46456"},
{name:"ghgh",pwd:"9898"},
{name:"tyty",pwd:"454"},
{name:"vbvb",pwd:"767"}
];
});
</script>
</html>
浙公网安备 33010602011771号