There are records, there is a function "expand comment":

$scope.showText = 'Read Full Review'; $scope.showTextstatus = false; $scope.readmore = 'ReviewComment'; $scope.readmoreprofile = function() { if ($scope.showTextstatus == false) { $scope.showTextstatus = true; $scope.readmore = 'ReviewCommentread_more'; $scope.showText = 'Less Read Review'; } else { $scope.showTextstatus = false; $scope.readmore = 'ReviewComment'; $scope.showText = 'Read Full Review'; } }; <div class="ProfileReviewData" ng-repeat="review in reviews"> <p ng-click="readmoreprofile()" class="ReadFullReview orange_text"> {{showText}} </p> </div>

Problem: a state common to all items review . In one place we click - opens / hides the full text of all comments. How to make each item have its own state (maximized / minimized)?

  • 2
    Show where in the template you use the showTextstatus variable. - Stepan Kasyanenko
  • Nowhere. It switches only in the controller. Moped is not mine. I do not know why they did that. - J. Doe
  • 2
    If the showTextstatus variable is not used anywhere in the html template, then opening / closing will not work. Look for something like something like ng-show='showTextstatus' or ng-if='showTextstatus' should be written somewhere. - Stepan Kasyanenko
  • It works, but for all records at once. Through ctrl + F I looked showTextstatus , rechecked, there is no such in html. - J. Doe
  • 3
    So look bad. Or use ng-show='showText=="Less Read Review"' :). Open the Elements tab in the browser console (F12 - in Chrome), and look at your blocks that open / close. - Stepan Kasyanenko

2 answers 2

In order for each element to have its own state of openness / closeness, it is necessary for each element to add a flag that indicates the open / closed state.

An example on jsfiddle .

 angular.module('ExampleApp', []) .controller('ExampleController', function() { this.reviews = [{ theme: "A", isShow: false, text: "AAAAAAAAAAAAAAAAAAAAAAAAA" }, { theme: "B", isShow: false, text: "BBBBBBBBBBBBBBBBBBB" }, { theme: "C", isShow: false, text: "CCCCCCCCCCCCCC" }, { theme: "D", isShow: false, text: "DDDDDDDDDDDDDDDD" }]; this.open = function(review) { review.isShow = !review.isShow; }; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="ExampleApp"> <div ng-controller="ExampleController as vm"> <div ng-repeat="review in vm.reviews"> {{review.theme}} <button ng-click="vm.open(review)"> {{review.isShow?"ะ—ะฐะบั€ั‹ั‚ัŒ":"ะžั‚ะบั€ั‹ั‚ัŒ"}} </button> <div ng-show="review.isShow"> {{review.text}} </div> </div> </div> </div>

An example of showing the open / close button depending on the length of the text.

An example on jsfiddle .

 angular.module('ExampleApp', []) .controller('ExampleController', function() { this.reviews = [{ theme: "S", limit: 10, text: "short text" }, { theme: "A", limit: 10, text: "AAAAAAAAAAAAAAAAAAAAAAAAA2" }, { theme: "B", limit: 10, text: "BBBBBBBBBBBBBBBBBBB2" }, { theme: "C", limit: 5, text: "CCCCCCCCCCCCCC2" }, { theme: "Huge limit", limit: 30, text: "DDDDDDDDDDDDDDDD2" }]; this.isShowButton = function(review) { return review.text.length > review.limit; } this.open = function(review) { if (review.limit) { review.oldLimit = review.limit; review.limit = null; } else review.limit = review.oldLimit; }; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app="ExampleApp"> <div ng-controller="ExampleController as vm"> <div ng-repeat="review in vm.reviews"> Limit: {{review.limit}} <button ng-show="vm.isShowButton(review)" ng-click="vm.open(review)"> {{review.limit?"ะžั‚ะบั€ั‹ั‚ัŒ":"ะ—ะฐะบั€ั‹ั‚ัŒ"}} </button> <div> {{review.text|limitTo:review.limit}} </div> </div> </div> </div>

  • Thank you, but I donโ€™t understand how to switch between short and long text options. For example, how to make jsfiddle.net/jth3e5L3 work ? - J. Doe
  • one
    And what in the submitted fidle does not work? - Stepan Kasyanenko
  • We need a slightly different logic: the default part of the message is available (for example, 140 characters). If the message is more than 140 characters, the "Show more" button is displayed, which loads the rest of the message. And exactly how to implement this change of states is my problem. - J. Doe
  • one
    Watch the modified feeds jsfiddle.net/Stepan_Kasyanenko/ew5bqqn9 - Stepan Kasyanenko

Try to use the variable from the ng-repeat element's scop, for example, name opened or closed , then you won't need to write anything in the controller, you will only manage with markup.

 <div class="ProfileReviewData" ng-repeat="review in reviews"> <p ng-click="opened = !opened" class="ReadFullReview orange_text"> <span ng-show="!opened">Read Full Review</span> <span ng-show="opened">Less Read Review</span> </p> </div>
  • It seems to me that for the questioner your example will be like magic . Because he does not know that an isolated $scope inside ng-repeat . The answer is not very obvious) - Stepan Kasyanenko