0

After click i am using class deal which contain this css of text-overflow: ellipsis. But it is not working because of ng-bind-hml. I can't remove ng-bind-html because my data is coming with some html tags.

<p ng-click="notes.notesClass = 'deal-expand';expand=true"  class="deal-collapse" ng-class="notes.notesClass" ng-bind-html="notes.content">
</p>
Ehsan88
  • 2,816
  • 4
  • 22
  • 44
Alok Vats
  • 1

1 Answers1

0

The correct way to manipulate classes in Angular is to use dictionaries with boolean values like this: ng-class={'deal-expand':true, 'deal-collapse':false}. The following code probably do the thing you want:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $sce) {
   $scope.notes=[];
   $scope.notes.content=$sce.trustAsHtml('This is some long text that will not fit in the box');
});
.deal-collapse{
  white-space: nowrap;
  text-overflow:ellipsis; 
  width:100px;
  overflow:hidden;
}
.deal-expand{
  text-overflow:inherit;
  overflow: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  <p ng-click="notes.notesClass = {'deal-expand':true, 'deal-collapse':false}"  class="deal-collapse" ng-class="notes.notesClass" ng-bind-html="notes.content">
  </p>
</div>

You could also take a look at Animations: the Angular Way for more details.

Ehsan88
  • 2,816
  • 4
  • 22
  • 44
  • And last but not the least, please try to provide more information in your question so that people who answer understand it better and also it will be more useful for others. – Ehsan88 Dec 12 '15 at 14:51