分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

AngularJS学习之旅—AngularJS HTML DOM(十三)

发布时间:2023-09-06 02:32责任编辑:白小东关键词:HTMLAngularDOMAngularJS

1、AngularJS HTML DOM
  AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

    ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
    ng-show 指令:ng-show 指令隐藏或显示一个 HTML 元素。
    ng-hide 指令:ng-hide 指令用于隐藏或显示 HTML 元素。

<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<script src="js/angular.min.js"></script></head><body> ???<div ng-app="myApp" ng-controller="myCtrl"> ???????<!-- ng-disabled 指令 --> ???????<p> ???????????<button ng-disabled="mySwitch">点我!</button> ???????</p> ???????<p> ???????????<input type="checkbox" ng-model="mySwitch">按钮 ???????</p> ???????<p> ???????????{{ mySwitch }} ???????</p> ???????<!-- ng-show 指令 --> ???????<p ng-show="true">我是可见的。</p> ???????<p ng-show="false">我是不可见的。</p> ???????<!-- ng-hide 指令 --> ???????<p ng-hide="true">我是不可见的。</p> ???????<p ng-hide="false">我是可见的。</p> ???</div></body></html><script> ???var app = angular.module(‘myApp‘, []); ???app.controller(‘myCtrl‘, function ($scope) { ???????$scope.firstName = "John"; ???????$scope.lastName = "Doe"; ???});</script>

AngularJS学习之旅—AngularJS HTML DOM(十三)

原文地址:https://www.cnblogs.com/songjianhui/p/10362170.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved