angularJs基础（3）

最新推荐文章于 2019-09-05 09:57:41 发布

wjk_along

最新推荐文章于 2019-09-05 09:57:41 发布

阅读量252

点赞数

分类专栏： angularjs 文章标签： angularjs angularJs基础作用域 angularJs指令

本文链接：https://blog.csdn.net/wjk_along/article/details/54863561

版权

angularjs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.ng开头指令（2）

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。

HTML文件：

<!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);
    }
}]);

wjk_along

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJs基础（3）

1.ng开头指令（2） ng-disabled 取值布尔值，等于false，不禁用标签，等于true禁用标签 ng-checked 取值布尔值，一般设置默认被选的单选或者复选框 ng-readonly 设置是否为只读 ng-selected 一般仅使用在option标签上，如果值为true则选择所在标...
复制链接

扫一扫

专栏目录