javascript
angularJS(5)
一,數據循環:特別要注意作用域
使用ng-repeat指令。
<div ng-app="myApp" ng-controller="myCtrl"><ul><li ng-repeat="x in names">{{x}}</li></ul> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) {$scope.names=["金角大王","銀角大王","紅孩兒"]; }); </script>二:angularJs控制器
1.AngularJS 應用程序被控制器控制。
2.ng-controller?指令定義了應用程序控制器。
控制器使用方法:
<div ng-app="myapp" ng-controller="myctrl">姓:<input type="text" ng-model="xing"><br>名:<input type="text" ng-model="ming"><h1>你的姓名是:{{xing+""+ming}}</h1><h2>好孩子:{{aaa()}}</h2> </div> <script>var app=angular.module("myapp",[]);app.controller("myctrl",function($scope){$scope.xing="孫";$scope.ming="悟空";$scope.aaa=function(){return $scope.xing+$scope.ming+“喜歡吃香蕉";}}) </script>接下來咱來解析一下這個案例:
AngularJS 應用程序由?ng-app?定義。應用程序在 <div> 內運行。
AngularJS 指令用于定義一個控制器:ng-controller="myctrl"?
myctrl?函數是一個 JavaScript 函數。
AngularJS 使用$scope?對象來調用控制器。
在 AngularJS 中, $scope 是一個應用對象(屬于應用變量和函數)。
控制器的?$scope?(相當于作用域、控制范圍)用來保存AngularJS Model(模型)的對象。
控制器在作用域中創建了兩個屬性 (xing?和?ming)。
ng-model?指令綁定輸入域到控制器的屬性(xing 和 ming).
?
三,DOM指令。
1,ng-disabled指令:直接綁定應用程序數據到HTML的disabled屬性。
<body ng-app="myapp" ng-controller="mctrl"><input type="button" value="下一步" ng-disabled="!mm"/><input type="checkbox" ng-model="mm"/></body><script type="text/javascript">var app=angular.module('myapp',[]);app.controller('mctrl',function ($scope) {});</script>2,ng-hide指令(隱藏元素)
<body ng-app="myapp" ng-controller="myctrl"><input type="checkbox" ng-model="mm" />隱藏<div ng-hide="mm"><h4>八百標兵奔北坡</h4></div></body><script type="text/javascript">var app=angular.module('myapp',[]);app.controller('myctrl',function ($scope) {})</script>3,ng-show指令:根據value的值來顯示(隱藏)HTML元素;可以使用表達式來計算布爾值(true或false)。
<body ng-app="myapp" ng-controller="myctrl"><input type="checkbox" ng-model="mm"/>顯示<div id="" ng-show="mm"><h2>窗前明月光</h2></div></body><script type="text/javascript">var app=angular.module('myapp',[]);app.controller('myctrl',function ($scope) {})</script>4,angularJs顯示隱藏
(1)ng-hide 指令用于設置應用部分是否可見。
???? ? ??ng-hide="true" 設置 HTML 元素不可見。
???? ? ??ng-hide=“false” 設置 HTML 元素可見。
(2)ng-show?指令可用于設置應用中的一部分是否可見?。
????? ?ng-show="false"?可以設置 HTML 元素?不可見。?
?????? ng-show="true"?可以以設置? HTML 元素可見。
?轉
轉載于:https://www.cnblogs.com/alinaxia/p/6241031.html
總結
以上是生活随笔為你收集整理的angularJS(5)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ConcurrentHashMap 内部
- 下一篇: Python高手之路【二】python基