求知 文章 文库 Lib 视频 Code iProcess 课程 认证 咨询 工具 火云堂 讲座吧   成长之路  
会员   
要资料
 
追随技术信仰

随时听讲座
每天看新闻
 
 

AngularJS教程
AngularJS快速入门
AngularJS环境设置
AngularJS MVC体系结构
AngularJS第一个应用程序
AngularJS指令
AngularJS表达式
AngularJS控制器
AngularJS过滤器
AngularJS表格
AngularJS HTML DOM
AngularJS模块
AngularJS表单
AngularJS包括
AngularJS Ajax
AngularJS视
AngularJS作用域
AngularJS服务
AngularJS依赖注入
AngularJS自定义指令
AngularJS国际化
 
 

AngularJS HTML DOM
76 次浏览
13次  
 捐助

以下指令可用于应用程序数据绑定到HTML DOM元素的属性。

ng-disabled 指令

添加ng-disabled属性到一个HTML按钮,通过它的模型。该模型绑定到复选框,看看以下变化。

<input type="checkbox" ng-model="enableDisableButton">Disable Button
    <button ng-disabled="enableDisableButton">Click Me!</button>

ng-show 指令

添加ng-show属性到一个HTML按钮,并把它传递模型。绑定模型到复选框,看看以下变化。

<input type="checkbox" ng-model="showHide1">Show Button
    <button ng-show="showHide1">Click Me!</button>

ng-hide 指令

添加ng-hide属性为HTML按钮,通过它的模型。绑定模型到复选框,看看以下变化。

<input type="checkbox" ng-model="showHide2">Hide Button
    <button ng-hide="showHide2">Click Me!</button>

ng-click 指令

添加ng-click属性为HTML按钮并更新模型。模型绑定HTML看看结合的变化。

<p>Total click: {{ clickCounter }}</p></td>
    <button ng-click="clickCounter = clickCounter + 1">Click Me!</button>

例子

下面的例子将展示上述所有指令。

testAngularJS.html

<html>
    <head>
    <title>AngularJS HTML DOM</title>
    </head>
    <body>
    <h2>AngularJS Sample Application</h2>
    <div ng-app="">
    <table border="0">
    <tr>
      <td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>
      <td><button ng-disabled="enableDisableButton">Click Me!</button></td>
    </tr>
    <tr>
      <td><input type="checkbox" ng-model="showHide1">Show Button</td>
      <td><button ng-show="showHide1">Click Me!</button></td>
    </tr>
    <tr>
      <td><input type="checkbox" ng-model="showHide2">Hide Button</td>
      <td><button ng-hide="showHide2">Click Me!</button></td>
    </tr>
   <tr>
      <td><p>Total click: {{ clickCounter }}</p></td>
      <td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button></td>
   </tr>
  </table>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  </body>
  </html>

输出

在Web浏览器打开textAngularJS.html,看到以下结果:


您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码: 验证码,看不清楚?请点击刷新验证码 必填



76 次浏览
13次
 捐助
 

每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号