0

I have the $scope object (array of objects) like this

    $scope.parts = [];

(content of $scope.parts is changing during 'run-time', not just filled once per page load)

Later, it some custom directive i show those parts in such manner:

    <li ng-repeat="part in parts">
        <span>{{part.name}}
            <i class="fa fa-check"
               tooltip="some tooltip"
               ...
            </i>
        </span>
    </li>

According to some logic, i want to change 'fa-' class and tooltip text. I can do it like this

        <i class="fa"
           ng-class="haveDescr(part.name)"

        //and in directive's controller
        $scope.haveDescr = function (partName) {
            return someCondition ? 'fa-check' : 'fa-question-circle';
        };

and so on for the tooltip, and... for every attribute i want to change?

Is there a better way, than to write a scope "check-function" for every attribute? How can i trigger changes in every single part/property of $scope.parts and do the DOM changes described above? What is the right "angular way" for this? Or, maybe it is possible to 'intercept' ng-repeat action and do everything there?

georgiy.zhuravlev
  • 475
  • 6
  • 21
  • 1
    Well, is suppose you could have a function on the array. Something like ng-repeat="part in processParts(parts)". And map the array elements into what you want (putting all your conditional logic in one location). I think the easiest to understand and support way is what you have, a function for each attribute. – Vlad274 Apr 30 '15 at 14:30
  • 1
    One-time building allows avoiding redundant calls, so 'function' way is not expensive one http://stackoverflow.com/questions/23969926/angular-lazy-one-time-binding-for-expressions – user2700840 Apr 30 '15 at 15:16

2 Answers2

1

You can use ng-class with an 'object' expression.

    <i class="fa" ng-class="{'fa-check' : part.name, 'fa-question-circle' : !part.name}">
Michael
  • 3,085
  • 1
  • 17
  • 15
  • Yes, I know I can use expressions in attributes - it's even more 'bulky' way. Besides, it is still require scope function for every attribute check (i do not check the length of name) – georgiy.zhuravlev Apr 30 '15 at 14:40
1

You can use ng-class and title

   <i ng-class="{'fa-check':showFaCheck(part.name), 'fa-question': !showFaCheck(part.name) }" title="{{getTooltip(part.name)}}"/>

Fiddle http://jsfiddle.net/4PYZa/303/

user2700840
  • 457
  • 3
  • 13