Change ng-bind-html value using controller

Question

I want to change the ng-bind-html vale, but have no idea how to do that.

My initial ng-bind-html vale is :-

<p class="forum-content" id="{{post.id}}" ng-bind-html="renderHtml(post.content)|truncate:90"></p>

and want this value:

<p class="forum-content" id="{{post.id}}" ng-bind-html="renderHtml(post.content)"></p>

after a button being pressed.

Initially it is truncating my data to 90 character and I want to show full data after button being pressed. My main moto is to show full data after button(read-more) being pressed.

Answer 1

Simple trick:

<p class="forum-content" id="{{post.id}}" ng-bind-html="renderHtml(post.content)|truncate:limit"></p>

<button ng-click="showAll()">Show all</button>

and in the controller:

$scope.limit = 90;
$scope.showAll = function() {
    $scope.limit = 100000000; // should be large enough not to truncate anything
};

This will still try to truncate though. If you really want to avoid it, a cleaner solution is to use the filter in the controller:

<p class="forum-content" id="{{post.id}}" ng-bind-html="renderAndTruncateHtml(post.content)"></p>

<button ng-click="showAll()">Show all</button>

and in the controller:

$scope.shouldTruncate = true;
$scope.renderAndTruncateHtml = function(value) {
    var result = $scope.renderHtml(value);
    if ($scope.shouldTruncate) {
        result = $filter('truncate')(result, 90);
    }
    return result;
};
$scope.showAll = function() {
    $scope.shouldTruncate = false;
};