javascript - AngularJS 一次只显示一个列表项

Question

HTML

<ul class="column__list">
    <li class="column__list--item" ng-repeat="task in tasks | orderBy:'name':false" data-ng-class="{active:taskIndex=={{$index}}}">
        <div class="column__list--expand fa" ng-click="expand = !expand" ng-class="{'fa-chevron-down': !expand, 'fa-chevron-up': expand}"></div>
        <div class="column__list--actions slide" ng-show="expand">
            {{ children }}
        </div>
    </li>
</ul>

Angular

angular.module('App.animate', [])
        .animation('.slide', function() {
            var NgHideClassName = 'ng-hide';
            return {
                beforeAddClass: function(element, className, done) {
                    if(className === NgHideClassName) {
                        jQuery(element).slideUp(done);
                        console.log('0');
                    }
                },
                removeClass: function(element, className, done) {
                    if(className === NgHideClassName) {
                        jQuery(element).hide().slideDown(done);
                        console.log('1');
                    }
                }
            }
        });

我有上面的内容，当单击时，div 将向下滑动，再次单击时将向上滑动 .column__list--expand

这可行，但如果我只想一次显示一个 li 并且也更新 ng-class 该怎么办？

jsFiddle example

Answer 1

将模板更改为:

<div ng-app="testApp" ng-controller="testController">
    <ul class="column__list">
      <li class="column__list--item" ng-repeat="task in tasks | orderBy:'name':false" data-ng-class="{active:taskIndex=={{$index}}}">
        <div class="column__list--expand fa" ng-click="$parent.selectedTask = $parent.selectedTask == task ? null : task" ng-class="{'fa-chevron-down': $parent.selectedTask!=task, 'fa-chevron-up': $parent.selectedTask==task}">{{ task.title }}</div>
        <div class="column__list--actions slide" ng-show="$parent.selectedTask==task">
            {{ task.description }}
        </div>
      </li>
    </ul>
  </div>

jsfiddle solution