angularJs中ng-if,ng-show,ng-disabled,ng-init使用案例

最新推荐文章于 2024-03-22 06:00:00 发布

泠泠在路上

最新推荐文章于 2024-03-22 06:00:00 发布

阅读量3.2k

点赞数

分类专栏： angularJs 文章标签： angularjs

本文链接：https://blog.csdn.net/u012396955/article/details/72792971

版权

angularJs 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

ng-show显示
ng-hide隐藏

ng-show和ng-if的区别：ng-show是用css样式操控，ng-if是移除整个dom元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="module" ng-controller="ctrl">
     {{name}}
    {{status}}
   <!--复选框name,勾上显示ng-show="name"和ng-if="name"的内容-->
<input type="checkbox" ng-model="name">
<span ng-show="name">感谢浏览泠泠在路上的博客</span>
<span ng-if="name">感谢浏览泠泠在路上的博客</span>


   <!--复选框status-->
    <label><input type="checkbox" ng-model="status"> 接收信息</label>
    <!--ng-init="info=false"，info初始化为false-->
     <!--ng-click="info=!info"，点击切换true和false-->
    <button ng-init="info=false" ng-click="info=!info">查看信息</button>
    <br/>
    <!--ng-show="info"，info为true时显示-->
    <textarea ng-show="info">信息内容: 感谢浏览泠泠在路上的博客文章。</textarea>
    <br/>
   <!--ng-disabled="!status"，默认按钮不可用-->
    <button ng-disabled="!status">多谢接收信息</button>
</div>

<script>
    var m = angular.module('module', []);
    m.controller('ctrl', ['$scope', function ($scope) {
    }]);
</script>
</body>
</html>

泠泠在路上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
angularJs中ng-if,ng-show,ng-disabled,ng-init使用案例

ng-show显示 ng-hide隐藏ng-show和ng-if的区别：ng-show是用css样式操控，ng-if是移除整个dom元素<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <script src="angular.min.js"></script></head><body><div ng
复制链接

扫一扫