Angular实现微博发布功能

这篇是实现数据绑定的第二弹，涉及到ng-disabled、ng-style等标签的使用。具体功能是：随着输入内容的增加，字数也会增加，当超过140个字符时，颜色变红。并且发布按钮不能点击，当没有输入内容时，清空按钮不能点击。

代码如下：

<!DOCTYPE html>
<html ng-app="myapp"><head><meta charset="UTF-8"><title>仿微博发布</title><script type="text/javascript" src="../js/angular.js" ></script></head><body ng-controller="MainCtrl as mainctrl"><p><textarea name="" rows="10" cols="30" ng-model="mainctrl.txt"></textarea><span ng-style="mainctrl.getColor()">{{mainctrl.txt.length}}/140字</span></p><p class="button"><input type="button" value="发布" ng-disabled ="mainctrl.txt.length >= 140"/><input type="button" value="清空" ng-click = "mainctrl.reset()" ng-disabled="mainctrl.txt.length == 0"/></p><script type="text/javascript">var myapp = angular.module('myapp',[]);myapp.controller('MainCtrl',[function(){this.txt = "";var that = this;this.getColor = function(){return that.txt.length >= 140 ? {"color":"red"}:{"color":"#333"};}this.reset = function(){that.txt ="";}}]);</script></body>
</html>

效果如下：

1.内容为空时

2.超过140个字符时

3.正常字符以内时

Angular实现微博发布功能相关推荐

Vue--简单实现微博发布功能和实现tab栏
1.微博发布功能 html 代码: <!DOCTYPE html> <html lang="en"> <head><meta charse ...
autojs微博_js实现微博发布小功能
微博发布功能,可发布可删除.样式没设置忽略,主要知识点及注意点: 1.动态添加节点标签. 2.内容为空时不能发布. 3.新发布的内容要在上面. 4.内容删除要同时删除掉节点. 5.为保持样式输入框要设 ...
html中微博发布怎么做,js实现微博发布小功能
微博发布功能,可发布可删除.样式没设置忽略,主要知识点及注意点: 1.动态添加节点标签. 2.内容为空时不能发布. 3.新发布的内容要在上面. 4.内容删除要同时删除掉节点. 5.为保持样式输入框要设 ...
redis+php微博,redis+php实现微博（三）微博列表功能详解
本文实例讲述了redis+php实现微博列表功能.分享给大家供大家参考,具体如下: 个人主页显示微博列表(自己及关注人的微博列表) /*获取最新的50微博信息列表,列出自己发布的微博及我关注用户的微博 ...
腾讯内测全新 Tim 3.0，支持微信登录；滴滴顺风车上线夜间服务；Angular 9.1 发布 | 极客头条...
整理 | 屠敏头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦 ...
原生js--选项卡全选反选，选项卡切换,模拟搜索框，微博发布（带时间）,注册协议倒计时
1.全选反选按钮 <!DOCTYPE html> <html> <head lang="en"><meta charset="U ...
zxing换行_微博换行功能最新资讯
近日,不少网友表示"微博可以换行了",目前"换行"功能仅限于PC网页版上使用,微博手机客户端仍无此项功能.但有不少用户在尝试后表示出现了"PC网页端也 ...
Cris 小哥哥的大数据项目之 HBase 模拟微博核心功能
Cris 小哥哥的大数据项目之 HBase 模拟微博核心功能 Author:Cris 文章目录 Cris 小哥哥的大数据项目之 HBase 模拟微博核心功能 Author:Cris 0. 序 1. 需 ...
企业微博发布时间_内容_原则
2019独角兽企业重金招聘Python工程师标准>>> 微博营销服务理念我们可以针对企业的官方微博提供设计.资源整合.优化等服务.在日常运营中,提供活动及话题设计,提供在线答疑.实 ...
用原生js写一个微博发布框，留言框。
本来这篇文章是昨晚发布的,但是昨天网上自己的网站出了一些问题. 百度一下可能是因为配置的问题,但是自己对后端,以及命令行实在不懂.好吧那就把它先放着.等我学了php以及linux在回来解决吧. 今天写 ...

Angular实现微博发布功能

Angular实现微博发布功能相关推荐

最新文章

热门文章