angularjs-ng-app,ng-model,ng-class,ng-style,三目,选项卡,$watch,$scope
2017-06-21 23:58
711 查看
AngularJS：MVx框架，把数据、表现、逻辑分离开
方便程序员——避免重复劳动（获取、事件）
版本：1.2.x 和 1.3.x
ng-bind 输出（不常用）
ng-app 范围
模板：{{}}，输出
1、ng-app=" " 定义angularJS的使用范围；
2、ng-init="变量=值;变量='值'" 初始化变量的值，有多个变量时，中间用分号隔开；
3、ng-model="变量" 定义变量名；
4、ng-bind="变量" 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。
ng-model 指令 绑定 HTML 元素 到应用程序数据。双向绑定
ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
1.Angular和JavaScript不互通
2.盯住数据
9、$scope
方便程序员——避免重复劳动（获取、事件）
版本：1.2.x 和 1.3.x
ng-bind 输出（不常用）
ng-app 范围
模板：{{}}，输出
1、ng-app=" " 定义angularJS的使用范围；
2、ng-init="变量=值;变量='值'" 初始化变量的值，有多个变量时，中间用分号隔开；
3、ng-model="变量" 定义变量名；
4、ng-bind="变量" 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。
ng-model 指令 绑定 HTML 元素 到应用程序数据。双向绑定
ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
1.Angular和JavaScript不互通
2.盯住数据
<!doctype html>
<!-- ng-app使用范围HTML -->
<!-- 包含AngularJs不能直接运行，需要引导，最简单的方法是AnjularJs自定义的ng-app HTML属性 -->
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引用AngularJs库，一个封装好的JavaScript文件，不依赖其他库； -->
<script src="angular.min.js"></script>
</head>
<body>
<!-- ng-init：数据初始化 -->
<div ng-init="a=0;b=0;json={a:12,b:4}">
<!-- ng-modle数据源 -->
<input type="text" ng-model="json.a">
<input type="text" ng-model="json.b">
<!-- {{数据输出}} -->
result：`json`.`a-json`.`b`
</div>
</body>
</html>2、class方法：ng-class<!doctype html>
<!-- ng-app使用范围HTML -->
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<style type="text/css" media="screen">
.box {width: 200px;height: 300px;background: #CCC;}
.box2 {width: 200px;height: 200px;background: red;}
</style>
</head>
<body>
<!-- ng-class：数组作为输入 -->
<div ng-init="arr=['box','box2','active']" >
<!-- class第一种方法 -->
<input type="text" ng-model="cls">
<div class="`cls`"> class第一种方法 </div>
<!-- class第二种方法 -->
<div ng-class="arr" >class第二种方法</div>
</div>
</body>
</html>3、style方法：ng-style<!doctype html>
<!-- ng-app使用范围HTML -->
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<style type="text/css" media="screen">
.box {width: 200px;height: 300px;background: #CCC;}
.box2 {width: 200px;height: 200px;background: red;}
</style>
</head>
<body>
<div ng-init="json={width:'200px',height: '300px',background: '#CCC'};" >
<!-- style第一种方法 -->
<input type="text" ng-model="cls">
<div style="`cls`"> style第一种方法 </div>
<!-- style第二种方法 -->
<div ng-style="json"> style第二种方法 </div>
</div>
</body>
</html>4、ng-if<!doctype html> <!-- ng-app使用范围HTML --> <html lang="en" ng-app=""> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> <style type="text/css" media="screen"> </style> </head> <body> <div ng-init="show=true" > <div ng-if="show"> ng-if：false 不显示 <br> ng-if: true 显示 <br> </div> </body> </html>5、三目运算符
<!doctype html>
<!-- ng-app使用范围HTML -->
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div ng-init="arr=[12,5,43,22,1]" >
<div ng-repeat="(key, value) in arr" style="{{key%2==1?'background: yellow':'';}}">
ng-repeat:第一种写法
`key`:`value`
</div>
<br>
<div ng-repeat="v in arr" style="{{v%2==1?'background:#CCC':''}}";>
ng-repeat:第二种写法
`v`
</div>
</body>
</html>6、选项卡-angularjs<!doctype html>
<!-- ng-app使用范围HTML -->
<html lang="en" ng-app="test">
<head>
<meta <meta charset=" " set="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
#div1 input {background: #CCC;}
#div1 input.active {background: yellow;}
#div1 div {width: 200px;height: 200px;border: 1px solid #000;}
</style>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app=angular.module('test', [])
app.controller('cont1', function($scope){
$scope.now=0
$scope.arr=[
{name:'TV',content:'PANDA'},
{name:'music',content:'JAY'},
{name:'sport',content:'CHINA'}
]
$scope.fn=function(n){
$scope.now=n
}
})
</script>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div id="div1" ng-controller="cont1">
<!-- ng-click与ng-repeat不能直接引用，需要通过函数使用 -->
<input ng-repeat="(key, value) in arr" type="button" value="`value`.`name`" class="{{now==$index?'active':''}}" ng-click="fn($index)">
<div ng-repeat="(key, value) in arr" ng-show="now==$index">
`value`.`content`
</div>
</div>
</body>
</html>7、$interval<!doctype html>
<!-- ng-app使用范围HTML -->
<html lang="en" ng-app="test">
<head>
<meta <meta charset=" " set="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
#div1 input {background: #CCC;}
#div1 input.active {background: yellow;}
#div1 div {width: 200px;height: 200px;border: 1px solid #000;}
</style>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app=angular.module('test', [])
app.controller('cont1', function($scope,$interval){
$scope.a=0
var timer=$interval(function(){
$scope.a++
if ($scope.a==100) {
$interval.cancel(timer)
}
},50)
})
</script>
<style type="text/css" media="screen">
</style>
</head>
<body ng-controller="cont1">
`a`
</body>
</html>8、$watch<!doctype html>
<!-- ng-app使用范围HTML -->
<html lang="en" ng-app="test">
<head>
<meta <meta charset=" " set="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
#div1 input {background: #CCC;}
#div1 input.active {background: yellow;}
#div1 div {width: 200px;height: 200px;border: 1px solid #000;}
</style>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app=angular.module('test', [])
app.controller('cont1', function($scope,$http){
$scope.str=''
$scope.arr=[]
$scope.$watch('str',function () {
$http.jsonp('https://s.taobao.com/search', {params:{
q:$scope.str,
cb:'JSON_CALLBACK'
}}).success(function (json) {
alert(json.q)
}).error(function () {
alert('fail')
})
})
})
</script>
<style type="text/css" media="screen">
</style>
</head>
<body ng-controller="cont1">
<input type="text" ng-model="str">
<ul>
<li ng-repeat="s in arr">`s`</li>
</ul>
</body>
</html>9、$scope
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app=angular.module('test', [])
//controller实际上为JavaScript函数，主要作用
//1、可以提供模型的初始值，与ng-init作用相同
//2、添加UI的函数
app.controller('HelloCtrl', ['$scope', function ($scope) {
//$scope可以加入与模板相关的数据和方法
$scope.name="AnjularJs"
$scope.getName=function(){
return $scope.name
}
}])
</script>
</head>
<body ng-app="test">
<div ng-controller="HelloCtrl">
<!--
ng-model实际上是普通的JavaScript对象，可以使用当前存在的所有JavaScript类和对象；
前提，只需要将对象指派给$scope，AngularJs就可以确认它存在
-->
say hello to,<input type="text" ng-model="name"><br>
<!-- $scope可以有效的操作View -->
<h1>hello,{{getName()}}!</h1>
</div>
</body>
</html>10、深入理解$scope作用域<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app=angular.module('test', [])
app.controller('WorldCtrl', ['$scope', function ($scope) {
$scope.population=60
$scope.countries=[
{name:'China',population:12},
{name:'USA',population:1.1}
]
}])
</script>
</head>
<body ng-app="test">
<ul ng-controller="WorldCtrl">
<!--
不同的DOM元素指向不同的作用域，并使用各自作用域中的变量渲染模板，所以不会造成命名冲突 ；
在例子中，<li>元素都有独自的作用域，分别定义各自的country变量
-->
<li ng-repeat="c in countries">
`c`.`name` has population of `c`.`population`
</li>
<hr>
World's population : `population` billions
</ul>
</body>
</html>11、{{}} 等同于 ng_bind<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script>
var app=angular.module('', [])
$scope.name="AngularJs"
</script>
</head>
<body ng-app="">
please input your name:<input type="text" ng-model="name"><br>
<div ng-bind="name"></div>
`name`
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- angularjs-更改样式ng-class,ng-style
- angular5 Tab选项卡实现以及[ngClass] [ngStyle] [style.display]的使用
- angularJs工作笔记-ng-class、ng-style的几种用法
- AngularJS中ng-app、ng-model、ng-bind、ng-init、ng-repeat、自定义指令
- AngularJs-ng-app -ng-model-ng-bind指令讲解和使用
- angularjs中ng-class及ng-style的使用
- angularjs学习笔记--ng-class的三种使用方法
- 关于angularjs中的ng-class的使用
- angularjs中ngModelController学习
- 初始化angularJS之ng-app的自动绑定和手动绑定
- angularJS的ng-model指令
- AngularJs之ngModel中$parsers和$formatters随笔
- AngularJs中模块的依赖注入，ng-model、ng-bind和{{}}的区别，路由机制。
- （三）ng-app的使用困惑和angularJS框架的自己主动载入
- angularjs中ng-class的使用
- ng-app指令【angularJs第一篇】
- angularJS中include的页面的ng-model不能实时存取
- 浅谈AngularJS中ng-class的使用方法
- 【AngularJS】解决ng-if中的ng-model值无效的问题(转)
- angularJs的ng-class切换class