change variable only for one ng-repeat document angularjs -
i'm trying show more text when user clicks read more button:
<md-content class="md-padding" layout-xs="column" layout="row" layout-wrap> <div flex-xs flex-gt-xs="50" layout="column" ng-repeat="paquete in paquetes"> <md-card> <md-card-title layout="row" layout-xs="column"> <md-card-title-media layout-margin> <img ng-src="{{paquete.img}}" class="md-card-image margin-auto" alt="image caption"> </md-card-title-media> <md-card-title-text> <span class="md-headline blue">{{paquete.title}}</span> <span class="md-subhead dark-blue">{{paquete.desc | limitto: limit.limit}} <span class="threedots" ng-show="mas.mas">... </span> <span style="cursor: pointer;" class="blue underlined" ng-click="limitfunction(paquete.desc)">leer <span class="mas" ng-show="mas.mas">más</span> <span class="menos" ng-show="menos.menos">menos</span>. </span> </span> </md-card-title-text> </md-card-title> </md-card> </div> </md-content> i'm limiting initial descripction {{paquete.desc | limitto: limit.limit}} , letting user click read more ng-click="limitfunction(paquete.desc)"
my controller:
$scope.limit = {limit: 200}; $scope.limitfunction = function (desc) { $scope.limit.limit = desc.length; }; but when click on 1 of ng-repeat elements, $scope.limit changes of them instead of 1 i'm clicking.
how change $scope.limit 1 i'm clicking?
you put limit on paquete object , pass limit function
<span class="md-subhead dark-blue">{{paquete.desc | limitto: paquete.limit}}<span class="threedots" ng-show="mas.mas">... </span><span style="cursor: pointer;" class="blue underlined" ng-click="limitfunction(paquete)">leer <span class="mas" ng-show="mas.mas">más</span><span class="menos" ng-show="menos.menos">menos</span>.</span></span> in controller:
$scope.limitfunction = function (paquete) { paquete.limit = paquete.desc.length; };
Comments
Post a Comment