戻りテキスト領域が

Question

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>

空の場合はfalse角度コードはねえ、今、このテキストを追加し、クリックのように数えるか、嫌うことができますスクリプトですが、一つの問題で、このコードworskでもテキスト領域であれば空です（嫌いなものが追加されたようです）。

質問：テキスト領域が空の場合（たとえば、trim（）などの文字はありません）、このコードは機能しません。

Answer 1

$ scope.newComment.commentを初期化して、が未定義のにならないようにする必要があります。

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>

Answer 2

あなたはこのような何か行うことができます：

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

Answer 3

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--; 
} 
    }; 
}]); 

テキストがempty.ifテキストがempty.donot増減を行うことであるかどうかを最初にチェックします。