模拟微博发布
-
- 需求
- 代码
- 效果图
- 说明
- 在线演示
需求
- 限制发送字数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>
效果图
说明
ng-disabled指令用来判断按钮是否可以被点击，里边可以写表达式，返回的结果是布尔值
在线演示
http://lengyuexin.coding.me/weibo/
