And for the sake of consistency/readability why not use ng-style instead of
interpolation on style attribute? (Forgive me since I have not seen this
syntax before { [ { } ] } )
<i ng-click="showHideGroup(row)"
ng-class="getToggleIcon(row)"
class="treeToggle"
*ng-style="getPadding(row)"*>
</i>
Another thing I'd mention here is related to performance. If your within an
ng-repeat on a lot of rows and your scope functions are heavy, this
approach can really degrade the performance of the app. You might maintain
state directly on the row object instead from the ng-click function:
$scope.showHideGroup = function(row){
row.isOpen = !row.isOpen; //toggler
if (row.isTreeNode){
row.padLeft = 'padding-left: 10px';
row.iconClass = row.isOpen ? 'minus-sign' : 'plus-sign';
}
else {
row.padLeft = 'padding-left: 20px';
row.iconClass = 'dot-symbol';
}
}
<i ng-click="showHideGroup(row)"
ng-class="row.iconClass"
class="treeToggle"
ng-style="row.padLeft">
</i>
The result will be that the digest cycle will not be executing your
functions every time a property on scope changes but instead only when an
actual click is performed.
I know this goes beyond your original question, and I'm sure Sander will
correct me if I am wrong, but I have found this approach of getting
functions off of my scope to be better practice for performance.
On Monday, March 17, 2014 2:38:04 PM UTC-6, William Huster wrote:
>
> As a courtesy to anyone who might stumble across this post. Here's my
> final implementation:
>
> <i ng-click="showHideGroup(row)"
> ng-class="getToggleIcon(row)"
> class="treeToggle"
> style="padding-left: {[{ getPadding(row) }]}px;">
> </i>
>
> I opted to use fontawesome icons instead of '+' / '-' / '.' as content
> inside of a div. The logic and icon class definitions were moved out of the
> template and into the getToggleIcon() function on scope.
>
> William
>
> *--*
> *William Huster*
> m1 | (202) 255-8444
> m2 | (317) 709-3425
>
>
> On Mon, Mar 17, 2014 at 3:43 PM, William Huster
> <[email protected]<javascript:>
> > wrote:
>
>> Even better! This makes for even cleaner compiled DOM that doesn't have
>> those ng-if comments.
>>
>> Thanks.
>>
>> On Monday, March 17, 2014 3:27:03 PM UTC-4, Sander Elias wrote:
>>>
>>> Hi,
>>> You should really do this a whole lot more dry!
>>>
>>> <div ng-click="showHideGroup(row)" style="padding-left: {[{
>>> getPadding(row) }]}px;">
>>> {{ row.children ? row.expanded ? "-" : "+" : "." }}}
>>> </div>`
>>>
>>> regards
>>> Sander
>>>
>> --
>> You received this message because you are subscribed to a topic in the
>> Google Groups "AngularJS" group.
>> To unsubscribe from this topic, visit
>> https://groups.google.com/d/topic/angular/W2MoRfpZEs0/unsubscribe.
>> To unsubscribe from this group and all its topics, send an email to
>> [email protected] <javascript:>.
>> To post to this group, send email to [email protected]<javascript:>
>> .
>> Visit this group at http://groups.google.com/group/angular.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
