日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > javascript >内容正文

javascript

angularJS(5)

發布時間:2025/4/9 javascript 25 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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)的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。