angularjs-ng-app,ng-model,ng-class,ng-style,三目,選項卡,$watch,$scope
AngularJS：MVx框架，把數據、表現、邏輯分離開
方便程序員——避免重複勞動（獲取、事件）javascript
版本：1.2.x 和 1.3.xcss
ng-bind 輸出（不經常使用）
ng-app 範圍html
模板：{{}}，輸出java
一、ng-app=" " 定義angularJS的使用範圍；程序員
二、ng-init="變量=值;變量='值'" 初始化變量的值，有多個變量時，中間用分號隔開；angularjs
三、ng-model="變量" 定義變量名；json
四、ng-bind="變量" 綁定變量名，獲取該變量的數據。這裏的變量就是第3條的變量名。可是通常都用雙重花括號來獲取變量的值，好比：{{變量}}。數組
ng-model 指令 綁定 HTML 元素 到應用程序數據。雙向綁定app
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>
二、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>
三、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>
四、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>
五、三目運算符
<!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>
六、選項卡-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>
七、$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>
八、$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>
九、$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函數，主要做用
//一、能夠提供模型的初始值，與ng-init做用相同
//二、添加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>
十、深刻理解$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>
十一、{{}} 等同於 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>
相關文章
- 1. angular 中的[ngClass]、[ngStyle]
- 2. Angular指令--*ngIf,*ngFor,*ngStyle,*ngClass
- 3. Angular6中[ngClass]、[ngStyle]的基本使用
- 4. [AngularJS] $scope.$watch
- 5. angular $scope.$watch
- 6. $scope.$watch監聽
- 7. $scope裏的$watch方法
- 8. 項目三（選作）
- 9. 案例20-選項卡套選項卡
- 10. js tab選項卡 mootools tab選項卡
- 更多相關文章...
- • ionic tab(選項卡) - ionic 教程
- • ionic 選項卡欄操作 - ionic 教程
- • RxJava操作符（三）Filtering
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
