<!DOCTYPE html><html><header> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--引入自己的樣式文件CSS--> <link href="angular_demo3.css" rel="stylesheet"> <!--引入angularJs--> <script src="angular.min.js"></script> <!--引入自己的js文件--> <script src="angualr_demo3.js"></script> <title>angularJsDemo3</title></header><!--ng-disabled 取值布爾值，等于false，不禁用標簽，等于true禁用標簽ng-checked 取值布爾值，一般設置默認被選的單選或者復選框ng-readonly 設置是否為只讀ng-selected 一般僅使用在option標簽上，如果值為true則選擇所在標簽對應的值ng-options 用在select的標簽中，下拉選擇框。使用方法跟ng-repeat相似。【類屬性名】 for 【自己起的名字】 in 【裝載類的數組名】具體看下面例子ng-class 除了跟原本的class用處一樣外，跟多的用來根據情況動態的選擇樣式 {類選擇器名字：Boolean值，類選擇器名字：Boolean值，。。。}有僅有一個值為true，就選擇那個樣式ng-href 用法跟href一樣的包括下面的ng-src也是跟src一樣，對應值都是地址值，他們跟原生的區別在于，未加載完全時不會出現ng-src 找不到地址顯示錯誤，比如<img src={{url}}>，URL為賦值之前頁面不會出現路徑錯誤而現實圖片失效的畫面。ng-href也是同樣的。【常用】頁面中有圖片需要通過網絡請求得到圖片地址的使用ng-src，開發中常用ng-class。--><body ng-app="myApp"> <div ng-controller="firstController"> <!-- option的選擇的值會直接綁定到sle上面，ng-selected指令為true代表選擇默認值，在哪一個位置為true哪一個就是默認值--> <select ng-model="sele"> <option ng-selected="isTwoFish">我是默認選擇的</option> <option>我是二</option> <option>我是三</option> </select> <button ng-click="showAlert(sele)">show</button> <br><hr><br> <!--這個跟下面的寫法效果一致，都不帶有默認值--> <select ng-model="sle"> <option ng-repeat="item in colors">{{item.name}}</option> </select> <button ng-click="showAlert(sle)">show</button> <!--color為請的名字可根據喜好換比如可以換成 yanse.name for yanse in colors; name這個屬性名和colors要根據控制器里的 數組相同，綁定到ng-model的就是選擇的值，即對應數組中的一個類。--> <!--這里沒有使用ng-selected選擇一個默認值，所以頁面上是空白的，只有在選擇一個只后才會顯示選擇的當前值--> <select ng-model="color" ng-options="color.name for color in colors"></select> <!-- 打印所選的顏色的code屬性值--> <button ng-click="showAlert(color.code)">show</button> <br><hr><br> <div ng-class="{box1:isrow,box2:!isrow}"> <div class="rect">1</div> <div class="rect">2</div> <div class="rect">3</div> </div> <button ng-click="changeLayout()">{{layout}}</button> <div ng-class="{box1:false,box2:false,box3:true}"> <div class="rect">1</div> <div class="rect">2</div> <div class="rect">3</div> </div> <br><hr><br> <div> 輸入網址：<input type="text" ng-model="netUrl.url"> <button ng-click="openUrl()">打開</button> <br> </div> </div></body></html>js控制器文件：/** * Created by wangjiakun on 2016/9/20 0020. */var myApp = angular.module("myApp",[]);myApp.controller("firstController",["$scope","$rootScope",function ($scope,$rootScope) { $scope.isTwoFish = true;// ng-selected 的值；該命令用的不多。 $scope.sle = "";// 綁定options的被選定的值 /* ng-options 的模擬數據*/ $scope.colors = [ {name:"紅色",code:"red"}, {name:"藍色",code:"blue"}, {name:"綠色",code:"yellow"} ]; $scope.isrow = true;//默認設置為橫排 $scope.layout = "豎排"; $scope.changeLayout = function () { $scope.isrow = !$scope.isrow; if($scope.isrow){ $scope.layout = "豎排"; }else{ $scope.layout = "橫排"; } }; $scope.netUrl = {url:""}; /*打開輸入的網址*/ $scope.openUrl = function () { window.location.href = $scope.netUrl.url; } $scope.showAlert = function (str) { alert(str); }}]);完整例子在附件中。
新聞熱點
疑難解答
