[angularjs] angularjs系列笔记（七）HTML DOM

最新推荐文章于 2025-08-14 17:31:00 发布

转载最新推荐文章于 2025-08-14 17:31:00 发布 · 61 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/taoshihan/p/5321656.html

文章标签：

#javascript #ViewUI

本文深入探讨AngularJS中用于绑定数据的指令，包括ng-disabled和ng-show指令的应用及使用方法，通过实例展示了如何实现HTML元素的属性绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AngularJs为HTML DOM元素的属性提供了绑定数据的指令

ng-disabled指令

ng-disabled指令直接绑定数据到HTML元素的disabled属性

ng-show指令

ng-show指令隐藏和显示一个HTML元素

ng-hide指令与ng-show相反

    <div ng-app="Home">
 
      <div ng-controller="ngDisabledTest">
        测试ng-disabled指令
        <button ng-disabled="mySwitch" >点击</button>
        <input type="checkbox" ng-model="mySwitch"/>切换
      </div>

      <div ng-controller="ngShowTest">
        测试ng-show指令
        <p ng-show="true">可见</p>
        <p ng-show="false">不可见</p>
      </div>
    </div>


  </body>

  <script type="text/javascript">
  //实例化应用对象，参数：模块名，空数组
  var app=angular.module("Home",[]);
  app.controller("ngDisabledTest",function(){})
  app.controller("ngShowTest",function(){})
  </script>