CODEWITHSUNDEEP
javascriptangularjs
Mat.Now
Mat.Now

Reputation: 1725

Return false Angular code if text area is empty

var myApp = angular.module("myApp", []);
myApp.controller("votesController", ['$scope', function($scope, $timeout) {
  $scope.comments = [
  ];
  $scope.newComment = {
    likes: 0
  };  
  $scope.createComment = function() {
    if ($scope.newComment.comment != "") {
      $scope.comments.push({
        comment: $scope.newComment.comment,
        likes: $scope.newComment.likes,
        likeColor : {},
        dislikeColor : {}
      });
    }
  };
  $scope.incrementLikes = function(comment) {
    comment.likes++;
  };
  $scope.decrementLikes = function(comment) {
    comment.likes--;
  };  
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp">
  <div ng-controller="votesController">
    <div ng-repeat="comment in comments">
      <div class="comment_box_all">
        <div class="comment_user">
          <div class="comment_note">
            <a id="vote_comment" ng-click="incrementLikes(comment, $index)" class="vote_comment" ng-style="comment.likeColor">Like</a>
            <span class="num_vote_comm_11"> | {{comment.likes}} | </span>
            <a ng-click="decrementLikes(comment, $index)" class="vote_dis_like_comm" ng-style="comment.dislikeColor">Unlike</a>
          </div>
          <div class="content_text_user_ans"><span>{{comment.comment}}</span></div>
        </div>
      </div>
    </div>
    <div class="area_comm_tex">
      <textarea class="text_area" ng-model="newComment.comment" placeholder="Add comment"></textarea>
      <button class="op_comm_now" ng-click="createComment()">Add text</button>
    </div>
  </div>
</div>

Hey, now this is script which add text and can count like or dislike click, but is one problem, this code worsk even if text area is empty (like/dislike is added).

Question: How do that if text area is empty(no any characters, e.g. trim()) this code no works just like return false ?

Upvotes: 0

Views: 56

Answers (3)

Ankit Kumar Gupta
Ankit Kumar Gupta

Reputation: 1322

var myApp = angular.module("myApp", []);
myApp.controller("votesController", ['$scope', function($scope, $timeout) {
  $scope.comments = [
  ];
  $scope.newComment = {
    likes: 0
  };  
  $scope.createComment = function() {
    if ($scope.newComment.comment != "") {
      $scope.comments.push({
        comment: $scope.newComment.comment,
        likes: $scope.newComment.likes,
        likeColor : {},
        dislikeColor : {}
      });
    }
  };
  $scope.incrementLikes = function(comment) {
  if($scope.newComment.comment && $scope.newComment.comment.length){
   comment.likes++;
  }

  };
  $scope.decrementLikes = function(comment) {
if($scope.newComment.comment && $scope.newComment.comment.length){
    comment.likes--;
}
  };  
}]);

you checked first whether text is empty.if text is empty.donot do increment or decrement.

Upvotes: 0

blackmiaool
blackmiaool

Reputation: 5344

You should init your $scope.newComment.comment to make it not undefined.

var myApp = angular.module("myApp", []);
myApp.controller("votesController", ['$scope', function($scope, $timeout) {
  $scope.comments = [
  ];
  $scope.newComment = {
    likes: 0,
    comment:""
  };  
  $scope.createComment = function() {
    if ($scope.newComment.comment != "") {
      $scope.comments.push({
        comment: $scope.newComment.comment,
        likes: $scope.newComment.likes,
        likeColor : {},
        dislikeColor : {}
      });
    }
  };
  $scope.incrementLikes = function(comment) {
    comment.likes++;
  };
  $scope.decrementLikes = function(comment) {
    comment.likes--;
  };  
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp">
  <div ng-controller="votesController">
    <div ng-repeat="comment in comments">
      <div class="comment_box_all">
        <div class="comment_user">
          <div class="comment_note">
            <a id="vote_comment" ng-click="incrementLikes(comment, $index)" class="vote_comment" ng-style="comment.likeColor">Like</a>
            <span class="num_vote_comm_11"> | {{comment.likes}} | </span>
            <a ng-click="decrementLikes(comment, $index)" class="vote_dis_like_comm" ng-style="comment.dislikeColor">Unlike</a>
          </div>
          <div class="content_text_user_ans"><span>{{comment.comment}}</span></div>
        </div>
      </div>
    </div>
    <div class="area_comm_tex">
      <textarea class="text_area" ng-model="newComment.comment" placeholder="Add comment"></textarea>
      <button class="op_comm_now" ng-click="createComment()">Add text</button>
    </div>
  </div>
</div>

Upvotes: 2

Brmmmm
Brmmmm

Reputation: 152

You could do something like this:

$scope.incrementLikes = function(comment) {
   if(comment.comment != null && comment.comment.length > 0)  comment.likes++;
};

$scope.decrementLikes = function(comment) {
    if(comment.comment != null && comment.comment.length > 0)  comment.likes--;
};

Upvotes: 2

Related Questions