AngularJs框架
指令(可以理解为属性)
在标签指令中书写的NG变量不用带$scope.
1、边界指令ng-app
(1)AngularJs框架在使用时,除了需要引入框架,还需要边界指令告知框架在哪个范围内生效
(2)习惯写在html标签中,在当前页面中生效
(3)<html ng-app>
2、呈现指令{{}}
(1){{}}用来表示内容呈现功能
(2)在{{}}中书写NG语法规则下的变量、字符串和表达式
3、信息指令ng-model
(1)NG框架规定ng-model用来对input、textarea这类用于收集用户数据的标签进行数据绑定
(2)ng-model所赋的值是用来保存用户输入内容的变量
(3)<textarea ng-model='自定义变量名'></textarea>
4、绑定指令ng-bind
(1)NG框架中用于对非输入项的标签的使用的类似于呈现指令的指令
(2)能够将NG变量绑定到想要显示的标签上,并且NG框架失败也不会将语法错误暴露出来
(3)ng-bind='自定义变量名,NG变量不用加{{}}'
(4)会对标签内的内容进行覆盖操作,包括内部的标签
5、初始化指令ng-init
(1)NG框架中使用该指令来对边界内部的数据模型(NG变量等)进行初始化赋值
(2)并没有规定的必须摆放位置,习惯放在body标签上
(3)在页面加载后自动对内部数据模型进行初始化操作
(4) <body ng-init='msg="hello angularJs"'></body>
6、标签开关指令ng-show/ng-hide
(1)ng-show='自定义变量',自定义变量为布尔值
(2)当自定义变量为true时,默认标签正常显示,当为false时,标签不显示,即标签所占空间位置也消失
(3)ng-hide和ng-show用法一样,true时不显示标签
7、配合控制器的遍历指令ng-repeat(用来重复构建html元素)
(1)在需要遍历的标签中添加 ng-repeat='自定义变量名 in NG控制器脚本中的变量';表示控制器脚本变量中存储多少个数据就创建多少个标签
(2)控制器脚本变量中存储的信息通过ng-bind='自定义变量名'或{{自定义变量名}}来取出
(3)如果控制器脚本中变量存储相同信息,创建时会报错
(4)通过在(1)之后添加 track by $index 解决(3)中的问题
(5)通过本指令循环创建的标签,如果控制器脚本中的数组删掉标签对应的数组中的变量
则该标签也会删除
其中(这些变量都可以在ng-repeat作用域内,直给其他标签/文本直接使用):
(1)$index可以提取出来,直接使用{{$index}}表示遍历元素的下标
(2)$first,$midlle,$last返回布尔值,分别对应第一个元素/中间元素/最后一个元素返回true,其他返回false,配合ng-show='$xx'可实现指定元素显示
(3)$odd/$even,当元素下标分别是奇/偶数的时候返回true
8、容器指令ng-view
(1)给哪个标签添加,该标签就用来路由模式下的作为一个页面加制不同功能的容器
9、标签路径指令ng-src、ng-href
(1)在NG模式下,作为a标签或img标签的路径属性,使用NG变量赋值
10、点击指令ng-click
(1)在标签中添加,ng-click='回调函数名()'
(2)在controller中补全函数,$scope.函数名=function(){...}
(3)在函数中调用函数外的变量,通过this.变量名调用
(4)事件指令能触发,标签所在自身包括向上元素中的controller中的函数,向下则不行
11、引入类指令ng-class
(1)在标签中使用,ng-class='{类1:true,类2:false}'; 为true代表添加
12、引入style样式指令ng-style
(1)在标签中,ng-style='{属性:'值',属性2:'值2',...}'或者'传入键值对对象'
13、鼠标移入移出指令ng-mouseenter/ng-mouseleave
(1)用法和ng-click一样,现在标签中定义,ng-mouseenter='函数名()',再在controller中补全
代码示例:
<html ng-app="app" ng-controller="main">
<head>
<meta charset="utf-8">
<title ></title>
<script src="js/libs/angular.js"></script>
<style>
.a{
color:red;
}
</style>
</head>
<body >
<div ng-controller='d1'>
<h2>价格计算机(自动)</h2>
数量:<input type="text" ng-model='num'>
价格: <input type="number" ng-model='price'>
总计:{{num*price}}
</div>
<div ng-controller='d2'>
数量:<input type="text" ng-model='num'>
价格: <input type="number" ng-model='price'>
<button ng-click='get()'>计算</button>
总计:{{ans}}
</div>
<div ng-controller='d3'>
<div>
<h2>人员信息列表</h2>
<ul ng-repeat="peo in arr ">
<li ng-show='$even'>{{peo}}+{{$index}}+{{$first}}+{{$last}}+{{$middle}}</li>
<li ng-class='$even ?{a:true}:{b:true}'>{{peo}}+{{$index}}+{{$first}}+{{$last}}+{{$middle}}</li>
<li ng-class='{a:$odd,b:$even}'>{{peo}}+{{$index}}+{{$first}}+{{$last}}+{{$middle}}</li>
</ul>
<p ng-bind='msg'></p>
<p ng-show="5>3" ng-class='{a:true}'>hh</p>
</div>
</div>
<script>
console.log(angular);
var app=new angular.module('app',[]);
app.controller('main',['$scope',function($scope){
$scope.msg='哈哈';
}])
app.controller('d1',['$scope',function($scope){
$scope.name='kobe'
$scope.num=0;
}])
app.controller('d2',['$scope',function($scope){
$scope.name='jack'
$scope.price=0;
$scope.num=0;
$scope.get=function()
{
$scope.ans=this.num*this.price
return $scope.ans
}
}])
app.controller('d3',['$scope',function($scope){
$scope.arr=['jeff','mike','jack'];
}])
</script>
</body>
</html>
504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
