代码改变世界

angular学习的一些小笔记(中)之基础ng指令

2016-10-24 16:57  改吧  阅读(303)  评论(0)  编辑  收藏  举报

一、布尔属性指令：

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

 

 

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