zoukankan      html  css  js  c++  java
  • angular学习的一些小笔记(中)之基础ng指令

    一、布尔属性指令:

    ng-disabled:就是ng-disabled=true-->就指向不可用

    <!doctype html>
    <html ng-app="">
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
    </head>
    <body>
    <input type="text" ng-model="someProperty" placeholder="Type to Enable">
      <button ng-model="button" ng-disabled="!someProperty">A Button</button>
    </body>
    </html>

    ng-checked:如上

    <!doctype html>
    <html ng-app="">
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
    </head>
    <body>
    <label>someProperty = {{someProperty}}</label>
    <input type="checkbox"
    ng-checked="someProperty"
    ng-init="someProperty = true"
    ng-model="someProperty">
    </body>
    </html>

    ng-readonly:如上,这个就跟上面一样的用法咯

    ng-selected:如上

    <!doctype html>
    <html ng-app="myApp">
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
    </head>
    <body>
    
      <label>Select Two Fish:</label>
      <input type="checkbox"
             ng-model="isTwoFish"><br/>
      <select>
        <option>One Fish</option>
        <option ng-selected="isTwoFish">Two Fish</option>
      </select>
    
      <script>
        angular.module('myApp', [])
      </script>
    
    </body>
    </html>

     二、类布尔属性:

    ng-href:

    <!doctype html>
    <html ng-app="myApp">
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
    </head>
    <body>
    
      <!-- Always use ng-href when href includes an {{ expression }} -->
      <a ng-href="{{myHref}}">I'm feeling lucky, when I load</a>
    
      <!-- href may not load before user clicks -->
      <a href="{{myHref}}">I'm feeling 404</a>
    
      <script>
    
        angular.module('myApp', [])
        .run(function($rootScope, $timeout) {
    
          $timeout(function() {
            $rootScope.myHref = 'http://google.com';
          }, 2000);
    
        })
      </script>
    
    </body>
    </html>

    你运行这段代码就会发现,ng-href会执行$timeout,但是href不会。

    ng-src:这个一样的道理

    <!doctype html>
    <html ng-app="myApp">
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
    </head>
    <body>
    
      <h1>Wrong Way</h1>
      <img src="{{imgSrc}}" />
    
      <h1>Right way</h1>
      <img ng-src="{{imgSrc}}" />
    
    
      <script>
        angular.module('myApp', [])
        .run(function($rootScope, $timeout) {
    
          $timeout(function() {
            $rootScope.imgSrc = 'https://www.google.com/images/srpr/logo11w.png';
          }, 5000);
    
        });
      </script>
    
    </body>
    </html>

    这个src执行会报错,不行你试试

    布尔属性,我觉得原型就是数据的双向绑定呢

  • 相关阅读:
    未授权访问漏洞总结
    常见的端口速查
    Memcache未授权访问漏洞利用及修复
    Ubuntu 16.04 LTS安装Docker
    Ubuntu安装Python2+Python3
    不直接登录SharePoint服务器,通过远程直接部署WSP解决方案包
    SharePoint 2010 人员选择器搜索范围的限定
    SharePoint 2010 匿名访问开启后不能访问Allitems.aspx或DisplayForm.aspx
    博主跑路了
    【pwnable.tw】 alive_note
  • 原文地址:https://www.cnblogs.com/lwwen/p/5993522.html
Copyright © 2011-2022 走看看