Friday, December 6, 2013

Angularjs adding comments feature using textarea and and submit button:
or forum like comment submission feature, and show with in the same page: 2nd way

<!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="t.txtcomment" placeholder="Your Comment" style='width:550px'></textarea>
                    <button ng-click='btn_add(t);' style='margin-top:10px;'>Post Comment</button>

                    <h4>Comments</h4>
                    <ul>
                        <li ng-repeat="comnt in comment"> {{ comnt.txtcomment }} <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(item) {
                    if($scope.t.txtcomment !=''){
                    $scope.comment.push(item);          
$scope.t = {}; or  //$scope.t = "";
                    }
                }

                $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>

1 comment:

  1. Since most marketers cannot or do not want to control the distribution function com- pletely, structuring channel relationships becomes a crucial task. http://www.atozexams.com/

    ReplyDelete