zoukankan      html  css  js  c++  java
  • 简话Angular 03 Angular内置表达式大全

    一句话: 大多数html标签属性和事件都有一个对应的ng指令

    说明:这些指令和原生html最大的区别就是可以动态更新.比如一个div的样式用ng-class后,我们就可以随意应用css class.

    1. 内置指令大全

    ng-include 包含一个文件
    ng-href ng-src 对应 href src
    ng-disabled ng-readonly 对应 disabled readonly
    ng-checked ng-selected ng-options ng-true-value ng-false-value 对应 checked select option
    ng-class ng-style ng-class-even ng-class-odd ng-show ng-hide ng-cloak class style, 隔行用不同样式, 元素显示与否, 加载不完全时闪烁效果
    ng-switch ng-if ng-repeat ng-repeat-start ng-repeat-end 逻辑控制 元素生成与否与遍历元素
    ng-submit ng-click ng-dblclick ng-change ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup 相应的鼠标键盘事件
    ng-bind ng-bind-html ng-bind-html-unsafe ng-bind-template 绑定显示数据: 文本,半html,全html,组合模板
    ng-view ng-route 路由功能

    2.  运行结果(所有标签都有相应实例)

    url: http://jimuyouyou.github.io/angular-bootstrap-rest-seed/examples/angular/3-ng-directives.html

    3. 源码

      1 <div>
      2         <span  ng-init="global.trueval='hello'"></span>
      3         <span  ng-init="global.falseval=false"></span>
      4         <span  ng-init="global.array=['dog', 'goat', 'cat']"></span>
      5         <span  ng-init="global.objArray=[{name: 'dog', age: 10}, {name: 'goat', age: 20}, {name: 'cat', age: 30}]"></span>
      6         
      7         <hr>
      8         <div>
      9             <label>ng-include实例-有的浏览器可能不支持</label>
     10             <div ng-include="'partials/ng-include.html'"></div>
     11             
     12             <span  ng-init="ni.tempalteName='partials/ng-include-var.html'"></span>
     13             <div ng-include="ni.tempalteName"></div>
     14         </div>
     15 
     16         <hr>
     17         <div>
     18             <p></p>
     19             <label>ng-href ng-src实例</label><p></p>
     20             <span  ng-init="nh.baidu='www.baidu.com'"></span>
     21             <a ng-href="http://{{nh.baidu}}">ng-href百度</a><br>
     22             <img ng-src="https://www.baidu.com/img/bd_logo1.png" style="60px;height:20px" />ng-src
     23         </div>
     24 
     25         <hr>
     26         <div><p></p>
     27             <label>ng-disabled ng-readonly实例</label><p></p>
     28             <button ng-disabled="global.trueval">ng-disabled</button>                    
     29             <input type="text" ng-readonly="global.trueval" placeholder="ng-readonly">    
     30         </div>
     31 
     32         <hr>
     33         <div><p></p>
     34             <label>ng-checked ng-selected ng-options ng-true-value ng-false-value实例</label><p></p>
     35             <input type="checkbox" ng-checked="global.trueval" ng-true-value="admin" ng-false-value="basic"> ng-checked ng-true-value="admin" ng-false-value="basic"
     36 
     37             <p></p>
     38             <select ng-model='test.name' ng-options="elem.value as elem.name for elem in global.objArray">
     39                 <option>--</option>
     40             </select>ng-options
     41 
     42             <select>
     43                 <option>--</option>
     44                 <option ng-repeat="elem in global.objArray" value="{{elem.name}}" ng-selected="elem.name=='dog'">
     45                         {{elem.age}}
     46                 </option>
     47             </select>ng-selected
     48 
     49         </div>
     50 
     51         <hr>
     52         <div><p></p>
     53             <label>ng-class ng-style ng-class-even ng-class-odd ng-show ng-hide ng-cloak实例</label><p></p>
     54             <input type="text" ng-class="{'btn-success' : global.trueval, 'btn': global.falseval}" ng-style="{ '300px', height: '30px'}"> ng-class ng-style <p></p>
     55             <table>
     56                 <tr ng-repeat="elem in global.objArray" ng-class-even="'bg-success'" ng-class-odd="'bg-danger'"><td>{{elem.name}} ng-class-even ng-class-odd</td></tr>
     57             </table>
     58             <input type="button" ng-show="global.trueval" class="btn btn-success" value="ng-show">
     59             <input type="button" ng-hide="!global.trueval" class="btn btn-primary" value="ng-hide">
     60             <p ng-cloak>ng-cloak </p>
     61         </div>
     62 
     63         <hr>
     64         <div><p></p>
     65             <label>ng-switch ng-if ng-repeat ng-repeat-start ng-repeat-end实例</label><p></p>
     66             <div ng-switch on="global.trueval">
     67                 <div ng-switch-when="abc">ng-switch-when abc</div>
     68                 <div ng-switch-default>ng-switch-default</div>
     69             </div>    
     70             <div ng-if="global.trueval">ng-if</div>
     71 
     72             <ul>
     73                 <li ng-repeat-start="elem in global.objArray">
     74                     <strong>{{elem.name}}</strong>
     75                 </li>
     76                 <li ng-repeat-end>{{elem.age}}</li>
     77             </ul>ng-repeat-start ng-repeat-end: 从start标记的元素开始,到end标记的元素结束,作为循环体进行循环输出,可以跳出父子元素关系。
     78         </div>
     79 
     80         <hr>
     81         <div><p></p>
     82             <label>ng-submit ng-click  ng-dblclick ng-change ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup实例</label>
     83             <div ng-controller="EventsController">
     84                 <span class="bg-danger">{{currentEventName}}</span><p></p>
     85                 <button ng-click="ngEvents('ng-click')">ng-click</button>
     86                 <span ng-dblclick="ngEvents('ng-dblclick')">ng-dblclick</span>
     87                 <input ng-model="currentEventName" type="text" ng-change="ngEvents('ng-change')" placehodler"ng-change me"><p></p>
     88                 <span ng-mousedown="ngEvents('ng-mousedow')" ng-mouseenter="ngEvents('ng-mousedow')" ng-mouseleave="ngEvents('ng-mouseleave')" ng-mousemove="ngEvents('ng-mousemove')" ng-mouseover="ngEvents('ng-mouseover')" ng-mouseup="ngEvents('ng-mouseup')" >ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup</span>
     89             </div>
     90 
     91             <script>
     92             var  myApp = angular.module('myApp', []);
     93             myApp.controller('EventsController', function($scope) {
     94                 $scope.ngEvents = function(param1) {
     95                     $scope.currentEventName = param1;
     96                 }
     97             });
     98             </script>
     99         </div>
    100         
    101         <hr>
    102         <div ng-controller="BindController"><p></p>
    103             <label>ng-bind ng-bind-html ng-bind-html-unsafe ng-bind-template实例</label><p></p>
    104             <span ng-bind="nb.textval"></span> ng-bind <p></p>
    105             <span ng-bind-template="{{ nb.textval }} and ng-bind-template {{ nb.htmlval }}"></span> ng-bind-template <p></p>
    106             ng-bind-html ng-bind-html-unsafe需要引入sanitize文件,也就是说Angular不推荐html
    107 
    108             <script>
    109             myApp.controller('BindController', function($scope, $sce) {
    110                 $scope.nb = {};
    111                 $scope.nb.textval = 'I am a text';
    112                 $scope.nb.htmlval = $sce.trustAsHtml('I am a html<strong>strong</strong> content');
    113             });
    114             </script>
    115         </div>
    116 
    117         <hr>
    118         <div><p></p>
    119             <label>ng-view ng-route实例</label><p></p>
    120             url: <a href="http://jimuyouyou.github.io/SearchableCookbook4Coder/plugins/angular-js/ng-view-ngRoute.html">http://jimuyouyou.github.io/SearchableCookbook4Coder/plugins/angular-js/ng-view-ngRoute.html</a>
    121         </div>
    122         <hr><hr>
    123 
    124     </div>

    4. 项目地址

    github: https://github.com/jimuyouyou/angular-bootstrap-rest-seed

  • 相关阅读:
    QPS、PV和需要部署机器数量计算公式
    libevent 源码深度剖析十三
    libevent源码深度剖析十二
    libevent源码深度剖析十一
    libevent源码深度剖析十
    libevent源码深度剖析九
    libevent源码深度剖析八
    ADO.NET入门教程(三) 连接字符串,你小觑了吗?
    配置文件的使用,如果要跨平台,建议直接用 xml, json, ini 或者本文档,看自己方便
    firemonkey 去掉ios 虚拟键盘上的‘done’toolbar
  • 原文地址:https://www.cnblogs.com/meteorcn/p/4662618.html
Copyright © 2011-2022 走看看