模拟微博发布

需求


  • 限制发送字数140，超过则红色警告，且无法点击发送按钮
  • 字数为0 ，清空和发布按钮无法点击

代码

<!DOCTYPE html>
<html lang="en" ng-app="app"><!-- 引入控制程序 -->
<head>
   <meta charset="UTF-8">
   <title>模拟微博发布</title>
   <script type="text/javascript" src="angular.min.js"></script>

</head>
<body>
<!-- 实例化控制器，格式：类名-as-实例名 -->
   <div ng-controller="MainCtrl as mainCtrl" ng-style="mainCtrl.render();">
      <h3 ng-style="mainCtrl.renderH3()">模拟微博发布</h3>
      <textarea cols="30" rows="10" ng-model="mainCtrl.context"></textarea>
      <span ng-style='mainCtrl.warn()'>{{mainCtrl.context.length}}/140字</span>
      <p>
         <button ng-disabled="mainCtrl.context.length > 140||mainCtrl.context.length==0">发布</button>
         <button ng-click="mainCtrl.reset()" ng-disabled="mainCtrl.context.length==0">清空</button>
      </p>
   </div>
<script>
   var app=angular.module("app",[])//定义控制程序，用ng-app指令引用
   app.controller("MainCtrl",[function(){//定义控制器，用ng-controller指令引用

      //定义属性context
      this.context="";//其实不定义也可以，angular比较智能，定义显得规范些
      //定义函数render
      this.render=function(){
         return {
            "background-color":"#2c3e50",
            "width":"400px",
            "margin":"100px auto",
            "text-align":"center",
            "height":"280px",
            "color":"white",
            "padding-top":"5px",

         };
      }
      //定义函数renderH3
      this.renderH3=function(){
         return {

            "text-align":"left",
            "margin-left":"50px"


         };
      }

      //定义函数warn()
      this.warn=function(){
         this.color=this.context.length>140?"red":"white";
         return {
            "color":this.color
         };
      }

      //定义函数reset()
      this.reset=function(){
         this.context="";
      }
   }])

</script>
</body>
</html>

效果图

模拟微博发布_javascript

说明


ng-disabled指令用来判断按钮是否可以被点击，里边可以写表达式，返回的结果是布尔值


在线演示

http://lengyuexin.coding.me/weibo/