<!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); }}]);完整例子在附件中。
新闻热点
疑难解答
