2015-04-05 40 views
0

我使用ng-repeat顯示列表,併爲所有元素設置了limitTo。如果用戶點擊閱讀更多按鈕,那麼我想增加該特定索引的limitTo。問題是它改變了ng-repeat中所有元素的limitTo值。 如何通過傳遞$ index來處理特定的元素,有什麼幫助?增加limitTo對於特定索引的角度

E.g.

<div class="review-story" ng-repeat="review in reviews"> 
    {{review.story | limitTo:numLimit}} 
    <a class="readmore" ng-click="readMore($index)">read more...</a> 
</div> 

JS:

$scope.numLimit = 50; 
$scope.readMore = function (index) { 
    if ($scope.numLimit == 50) { 
     $scope.numLimit = 10000; 
     $('.readmore').html("read less"); 
    } 
    else { 
     $('.readmore').html("read more..."); 
     $scope.numLimit = 50; 
    } 
}; 
+0

顯示一些相關的* *什麼你試圖 – 2015-04-06 00:06:41

+0

@NewDev代碼:我已經更新了文章。當我使用$ scope.numLimit [index]它不起作用。任何工作? – user979799 2015-04-06 00:35:05

回答

1

這裏是一個解決方案,其存儲在所述數據對象的限制。您可能不想這樣做,但您的解決方案是將範圍映射評估中的一些數據存儲到限制數量中。

http://plnkr.co/edit/spVkTCYZaBpZtQgAjrNi?p=preview

$scope.reviews = [ 
    { 
     story: 'this is the first story' 
    }, 
    { 
     story: 'this is the second story' 
    }, 
    { 
     story: 'this is the third story and it is longer than 30 characters' 
    }, 
    { 
     story: 'this is the fourth story and it is longer than 30 characters' 
    } 
    ]; 
    $scope.increaseLimit = function(review) { 
    if (review.limit) { 
     review.limit += 10; 
    } 
    else { 
     review.limit = 40; 
    } 
    } 

模板:

<div class="review-story" ng-repeat="review in reviews"> 
    {{review.story | limitTo: review.limit || 30}}<br /> 
    {{review}} 
    <a href="#" ng-click="increaseLimit(review)">click me</a> 
</div>