Question

我有一个在服务器端呈现的DL列表：

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

我想在点击DT时隐藏/显示DD。但是当发生这种情况时，我还需要更改dt和dd类。

我可以用角度来做这个吗？我是否需要或应该使用控制器？

Answer 1

这是一个codepen example来帮助您入门。这不是一个完整的解决方案，但应该指向正确的方向。

这是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>

和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.
      });
    }
  };
});

隐藏/显示带角度的列表

1 个答案: