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

来源：互联网发布：开淘宝店铺步骤图片编辑：程序博客网时间：2024/05/18 00:44

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