1

I am trying to set dynamic data as title to label tag. I have used capitalize property from lodash and applied it something like this <label title="{{caption}} {{optVal.charAt(0).toUpperCase()+optVal.slice(1)}}">{{optVal}}</label> .I realized there's too much of calculation happening on the DOM object which is bad practice, later I tried to pass it to a function where it could return the needed result. I am still looking for a better solution to reduce the overhead, can someone help me with this.

http://jsbin.com/cexonihaki/edit?html,js,output

Ritu K
  • 27
  • 6
  • Why don't you use css to capitalize. CSS property text-transform: capitalize; – joashp May 11 '16 at 06:32
  • 1
    yes @joashp is right, you can use css for this, have a look at this http://stackoverflow.com/questions/30207272/capitalize-the-first-letter-of-string-in-angularjs – Shubham Takode May 11 '16 at 06:42
  • He cannot uppercase only a letter and left the other word as it with text-transform – AlainIb May 11 '16 at 07:09
  • joashp@ I cannot use css capitalize property as I am applying change only to title and not displaying it anywhere else, the other option is to apply filter. – Ritu K May 11 '16 at 17:03
  • Shubham Takode@ Your suggestion actually gave a solution to me, I am still not sure if it's the ideal solution or not but still thanks for the reference :) – Ritu K May 11 '16 at 17:05

2 Answers2

1

You can create a function in your scope who create the title and use it in the view ( or use CSS as other mention it but it will uppercase all the title and not only a letter )

I cloned your jsbin, http://jsbin.com/vutuwibube/1/edit?html,js,output it run instantly

 <label ng-attr-title="{{creatTitle()}}">{{optVal}}</label>

Controller side :

 $scope.creatTitle = function( ){
      return $scope.caption + " " + $scope.optVal.charAt(0).toUpperCase()+ $scope.optVal.slice(1);
 }
AlainIb
  • 4,544
  • 4
  • 38
  • 64
  • AlainIb@ I had tried this as well, but still looking for a better solution – Ritu K May 11 '16 at 06:59
  • I tried ;) you have three posibilities. 1) do the concat in the view as you do, 2) do the concat in controller as i do 3) use CSS but cannot make only a letter uppercased – AlainIb May 11 '16 at 07:09
0

You can use $timeout() function or scope.$digest();

here is the angular doc. for digest

thats the nice documentation for differences between them

oguzhan00
  • 499
  • 8
  • 16