Angular实现微博发布功能

最新推荐文章于 2021-04-02 01:17:44 发布

敲出真谛

最新推荐文章于 2021-04-02 01:17:44 发布

阅读量342

点赞数 1

分类专栏： angular 文章标签：仿微博发布

本文链接：https://blog.csdn.net/qq_36818627/article/details/82377937

版权

angular 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇是实现数据绑定的第二弹，涉及到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.正常字符以内时

敲出真谛

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Angular实现微博发布功能

这篇是实现数据绑定的第二弹，涉及到ng-disabled、ng-style等标签的使用。具体功能是：随着输入内容的增加，字数也会增加，当超过140个字符时，颜色变红。并且发布按钮不能点击，当没有输入内容时，清空按钮不能点击。代码如下：&lt;!DOCTYPE html&gt;&lt;html ng-app="myapp"&gt; &lt;head&gt; &lt;meta cha...
复制链接

扫一扫

专栏目录