Angularjs[24] - 内置节点属性

ng-style

<!--<div ng-style="{color:‘red‘,‘margin-top‘:‘50px‘}">-->
        <!--ng-style-->
<!--</div>-->
<div ng-style="defaultStyle" ng-show="status">
        ng-style
</div>

$scope.defaultStyle = {
      color:‘red‘,
      ‘margin-top‘:‘50px‘
};

ng-class
ng-class-even
ng-class-odd

<ul ng-class="{red:status}" ng-init="cityArr = [‘上海‘,‘北京‘,‘南京‘]">
　　<li ng-class-even="‘even‘" ng-class-odd="‘odd‘" ng-repeat="city in cityArr">
    　　<span>
        　　index:{{$index}}
       </span>
       <span>
           first:{{$first}}
       </span>
       <span>
           middle:{{$middle}}
       </span>
       <span>
           last:{{$last}}
       </span>
       <span>
           {{city}}
       </span>
   </li></ul>

<style>
　　.red{
    　　color: red;
    }
</style>

ng-show
ng-hide

<div ng-style="defaultStyle" ng-show="status">
　　ng-style
</div>

ng-switch

<ul ng-switch on="status">
    <li ng-switch-when="true">
        true
    </li>
    <li ng-switch-when="false">
        false
    </li>
</ul>

ng-src
ng-href

<img ng-src="{{src}}" alt="">

 $scope.src = ‘http://www.angularjs.org/img/AngularJS-large.png‘;

ng-if

<div ng-if="status">
　　status show
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <div ng-app="myApp">
       <div ng-controller="firstController">
           <p>{{1+1}}</p>
           <p ng-bind="1+1"></p>

           <!--$scope.cityArr = [‘上海‘,‘北京‘,‘南京‘];-->
           <ul ng-class="{red:status}" ng-init="cityArr = [‘上海‘,‘北京‘,‘南京‘]">
               <li ng-class-even="‘even‘" ng-class-odd="‘odd‘" ng-repeat="city in cityArr">
                <span>
                    index:{{$index}}
                </span>
                   <span>
                    first:{{$first}}
                </span>
                   <span>
                    middle:{{$middle}}
                </span>
                   <span>
                    last:{{$last}}
                </span>
                   <span>
                    {{city}}
                </span>
               </li>
           </ul>

           <div ng-include="‘other.html‘"></div>
           <div ng-include src="‘other.html‘"></div>

           <button ng-click="changeStatus($event)">切换状态</button>
           {{status}}

           <!--<div ng-style="{color:‘red‘,‘margin-top‘:‘50px‘}">-->
               <!--ng-style-->
           <!--</div>-->
           <div ng-style="defaultStyle" ng-show="status">
               ng-style
           </div>

           <ul ng-switch on="status">
               <li ng-switch-when="true">
                   true
               </li>
               <li ng-switch-when="false">
                   false
               </li>
           </ul>

           <!--同 ng-bind-->
           <img ng-src="{{src}}" alt="">

           <div ng-if="status">
               status show
           </div>

       </div>
    </div>

<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>

var myApp = angular.module(‘myApp‘,[])
.controller(‘firstController‘,function ($scope) {
    $scope.status = ‘false‘;
    // $scope.changeStatus = function () {
    //     $scope.status = !$scope.status;
    // }
    $scope.changeStatus = function (event) {
        //通过 element 转换成 jquery 对象
        angular.element(event.target).html(‘转换状态为：‘ + $scope.status);
        $scope.status = !$scope.status;
    };
    $scope.defaultStyle = {
        color:‘red‘,
        ‘margin-top‘:‘50px‘
    };
    $scope.src = ‘http://www.angularjs.org/img/AngularJS-large.png‘;
});

status: false

status: true

时间： 2025-01-14 13:19:27

Angularjs[24] - 内置节点属性的相关文章

JavaScript 中关于Date的内置对象属性和方法的总结

Date 属性: 1.constructor 所建立对象的函数参考 2.prototype 能够为对象加入的属性和方法方法: 1.getDay() 返回一周中的第几天(0-6) 2.getYear() 返回年份.2000年以前为2位,2000(包含)以后为4位 3.getFullYear() 返回完整的4位年份数 4.getMonth() 返回月份数(0-11) 5.getDate() 返回日(1-31) 6.getHours()

AngularJS复习-----内置过滤器和内置服务

AngularJS中的内置服务(共30多个): $http 发送http请求,主要用于进行异步数据请求的功能实现,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程请求 $resource 创建一个可以restful服务器端数据源交互对象 $location 用于返回当前页面的URL地址 $window 浏览器的window元素的jquery包装 $document 浏览器的document元素的jQuery包装 $rootscope 跟作用域的访问

JS所有内置对象属性和方法汇总

JS三大对象对象,是任何一个开发者都无法绕开和逃避的话题,她似乎有些深不可测,但如此伟大和巧妙的存在,一定值得你去摸索.发现.征服. 我们都知道,JavaScript有3大对象,分别是本地对象.内置对象和宿主对象. 在此引用ECMA-262(ECMAScript的制定标准)对于他们的定义: 本地对象与宿主无关,独立于宿主环境的ECMAScript实现提供的对象. 简单来说,本地对象就是 ECMA-262 定义的类(引用类型). 这些引用类型在运行过程中需要通过new来创建所需的实例对象. 包

Python进阶-----类的内置item属性方法

类的内置item相关方法只有在通过字典key操作才会触发而通过点的方式来操作,则触发attr相关方法 class Foo: def __init__(self,name,age): self.name = name self.age = age def __getitem__(self, item): print('执行getitem') return self.__dict__[item] def __setitem__(self, key, value): print('执行setitem'

maven 内置pom属性

内置属性:如 ${basedir} 表示项目根目录即包含了pom.xml文件的目录 ${version} 表示项目版本 pom属性 ${project.build.sourcedirectory} : 项目构建输出目录,默认为src/main/java ${project.build.testSourceDirectory} : 项目的测试源码目录,默认为src/test/java/ ${project.build.directory} :项目构建输出目录,默认为target/ ${proje

angularJS使用内置服务

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="myApp" ng-contr

Angularjs[22] - 内置渲染指令

指令:利用指令来扩展HTML标签,增加声明式语法来实现想做的任何事,可以应用有特殊意义的元素和属性来替换一般的HTML标签. 渲染指令: ng-init:初始化应用时创建一个变量: ng-bind: 使用给定的变量或表达式的值来替换 HTML 元素的内容: ng-repeat: $index:当前索引: $first:是否为第一个元素: $middle:是否为非头非尾元素: $last:是否为尾元素: ng-include: 包含外部 HTML 文件. <!DOCTYPE html> <

Angularjs[22] - 内置事件指令

ng-change ng-click ng-dbclick ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove mg-mouseover ng-mouseup ng-submit <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> &l

Python随心记--类的内置attr属性

class Foo: x = 1 def __init__(self,y): self.y = y def __getattr__(self, item): #如果对象不存在的属性是会触发 print('执行了__gerattr__') def __delattr__(self, item): #删除的时候会触发 print('执行了__delattr__') self.__dict__.pop(item) def __setattr__(self, key, value): #设置属性是会触发