AngularJS 用ng-show来绑定ng-model

最新推荐文章于 2020-12-01 04:26:22 发布

yangxh11111

最新推荐文章于 2020-12-01 04:26:22 发布

阅读量1.4k

点赞数

分类专栏： AngularJS 文章标签： angularjs ng-mode ng-show

本文链接：https://blog.csdn.net/yangxh11111/article/details/53608664

版权

AngularJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

AngularJS 用ng-show来绑定ng-model

<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.min.js"></script>
    <style>
      *{
        margin:0;
        padding:0;
      }
      .box{
        position: relative;
        margin: 0 auto;
        text-align: center;
        width: 600px;
        background: pink; 
      }
    </style>
</head>
<body>
  <div class="box" ng-controller="clt">
    <input type="text" ng-model="pty" placeholder="来这里输入数字吧">
    <!-- 用ng-show来绑定ng-model如果输入框输入的数大于10为true显示，否则false隐藏 -->
    <div style="background: red" ng-show="pty>10" class="ng-hide" >
      <h1>你输了大于10的数我才出来的</h1>
    </div>
  </div>
<script>
    var app=angular.module('myapp',[]);
    app.controller('clt',function($scope){

    })
</script>
</body>
</html>

试一试：快去输入框里输入一次大于10的数和一次不大于10 的数看看它们区别吧！

yangxh11111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 用ng-show来绑定ng-model

AngularJS 用ng-show来绑定ng-model<html lang="en" ng-app="myapp"><head> <meta charset="UTF-8"> <title>Title</title> <script src="angular.min.js"></script> <style> *{ margin:0
复制链接

扫一扫