angularjs - Hide / Show list with angular -


i have dl list rendered @ server side:

<dl>   <dt>dt 01</dt>   <dd>dd 01</dd>   <dt>dt 02</dt>   <dd>dd 02</dd> </dl>

i hide / show dd when dt clicked. need change both dt , dd class when happens.

can angular? need, or should use, controller this?

here's codepen example started. it's not complete solution should point in right direction.

and here's html:

<body ng-controller="mainctrl">   <dl toggle-desc>     <dt>dt 01</dt>     <dd>dd 01</dd>     <dt>dt 02</dt>     <dd>dd 02</dd>   </dl> </body>

and js:

angular.module('myapp', []).controller('mainctrl', function($scope) { }).directive('toggledesc', function() {   return {     restrict: 'a',     link: function(scope, element) {       var dtlist = element.find('dt');       dtlist.bind('click', function(evt) {         //todo: hide/show next sibling, change class names etc.       });     }   }; });

Comments

Post a Comment