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执行会报错,不行你试试

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

  • 相关阅读:
    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
    ASP.NET MVC之文件上传【二】
    ASP.NET MVC之文件上传【一】
    [JSOI2009]球队收益
    Codeforces 323 B Tournament-graph
    2017 [六省联考] T6 寿司餐厅
    [CQOI2014]数三角形
    Hdoj 3506 Monkey Party
    Loj #125. 除数函数求和(2)
    Codeforces 235 E Number Challenge
  • 原文地址:https://www.cnblogs.com/lwwen/p/5993522.html
Copyright © 2011-2022 走看看