angularjs - How to add a directive onto a node in an ng-repeat only once -
i have feature tour directive similar joyride works adding directive onto dom element highlights element during user walk through. example:
<button test-drive-step test-drive-text="to activate search click here" test-drive-next-label="next">search</button> my question if want place on list of elements , point out single element using feature how that? example if node wanted place test-drive-step directive on in ng-repeat how limit directive 1 element out of items rather all?
for example,
<li ng-repeat="item in items" test-drive-step ...>{{item.name}}</item> that place test-drive-step directive on every element in items, want on first element. how limit first element?
one option pass in conditional directive, telling whether apply itself.
for example can use $index === 0 test whether on first ng-repeat element ($index being ng-repeat element on). so
<li ng-repeat="item in items" test-drive-step="$index === 0" ...>{{item.name}}</item> and add directive scope:
scope: { test-drive-step: '=' }, so directive can apply if attribute true:
link: function(scope, element, attr) { if (scope.test-drive-step) element.addclass('blue'); // or whatever... } here's fiddle showing concept: http://jsfiddle.net/6sc0acoa/2/
Comments
Post a Comment