Angularjs adding comments feature using textare and and submit button:
or forum like comment submission feature, and show with in the same page:
<!Doctype html>
<html ng-app="MyTutorialApp">
<head>
<title>AngularJs Simple Comment box Example: DevZone.co.in </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<style>
#dv1{ border:1px solid #DBDCE9; margin-left:auto; margin-right:auto; width:550px; border-radius:7px; padding: 25px; }
div {width: 200px;}
h2 {font: 400 40px/1.5 Helvetica, Verdana, sans-serif; margin: 0; padding: 0; }
ul {list-style-type: none; margin: 0;padding: 0; }
li {font: 200 20px/1.5 Helvetica, Verdana, sans-serif; border-bottom: 1px solid #ccc; }
li:last-child {border: none; }
li a { text-decoration: none; color: #000; display: block; }
</style>
</head>
<body>
<div id='dv1'>
<form ng-controller="FrmController">
Post your Comment
<form ng-controller="FrmController">
<textarea ng-model="txtcomment" placeholder="Your Comment" style='width:550px'></textarea>
<button ng-click='btn_add();' style='margin-top:10px;'>Post Comment</button>
<h4>Comments</h4>
<ul>
<li ng-repeat="comnt in comment"> {{ comnt }} <a style="float: right;" href="" ng-click="remItem($index)">x</a></li>
</ul>
</form>
</div>
<script type="text/javascript">
var app = angular.module('MyTutorialApp',[]);
app.controller("FrmController", function($scope){
$scope.comment = [];
$scope.btn_add = function($index) {
if($scope.txtcomment !=''){
$scope.comment.push($scope.txtcomment);
$scope.txtcomment = "";
}
}
$scope.remItem = function($index) {
$scope.comment.splice($index, 1);
}
});
/* function FrmController($scope) {
$scope.comment = [];
$scope.btn_add = function() {
if($scope.txtcomment !=''){
$scope.comment.push($scope.txtcomment);
$scope.txtcomment = "";
}
}
$scope.remItem = function($index) {
$scope.comment.splice($index, 1);
}
} */
</script>
</body>
</html>
or forum like comment submission feature, and show with in the same page:
<!Doctype html>
<html ng-app="MyTutorialApp">
<head>
<title>AngularJs Simple Comment box Example: DevZone.co.in </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<style>
#dv1{ border:1px solid #DBDCE9; margin-left:auto; margin-right:auto; width:550px; border-radius:7px; padding: 25px; }
div {width: 200px;}
h2 {font: 400 40px/1.5 Helvetica, Verdana, sans-serif; margin: 0; padding: 0; }
ul {list-style-type: none; margin: 0;padding: 0; }
li {font: 200 20px/1.5 Helvetica, Verdana, sans-serif; border-bottom: 1px solid #ccc; }
li:last-child {border: none; }
li a { text-decoration: none; color: #000; display: block; }
</style>
</head>
<body>
<div id='dv1'>
<form ng-controller="FrmController">
Post your Comment
<form ng-controller="FrmController">
<textarea ng-model="txtcomment" placeholder="Your Comment" style='width:550px'></textarea>
<button ng-click='btn_add();' style='margin-top:10px;'>Post Comment</button>
<h4>Comments</h4>
<ul>
<li ng-repeat="comnt in comment"> {{ comnt }} <a style="float: right;" href="" ng-click="remItem($index)">x</a></li>
</ul>
</form>
</div>
<script type="text/javascript">
var app = angular.module('MyTutorialApp',[]);
app.controller("FrmController", function($scope){
$scope.comment = [];
$scope.btn_add = function($index) {
if($scope.txtcomment !=''){
$scope.comment.push($scope.txtcomment);
$scope.txtcomment = "";
}
}
$scope.remItem = function($index) {
$scope.comment.splice($index, 1);
}
});
/* function FrmController($scope) {
$scope.comment = [];
$scope.btn_add = function() {
if($scope.txtcomment !=''){
$scope.comment.push($scope.txtcomment);
$scope.txtcomment = "";
}
}
$scope.remItem = function($index) {
$scope.comment.splice($index, 1);
}
} */
</script>
</body>
</html>
No comments:
Post a Comment