首页 > 在使用ng-repeat制作组件的时候,在添加ng-click事件之后,怎么设置点击展示一个,隐藏其他的

在使用ng-repeat制作组件的时候,在添加ng-click事件之后,怎么设置点击展示一个,隐藏其他的

(function () {
    'use strict';

    angular.module('ui.component.commentContent',[])
        .directive('uiComponentCommentContent',commentContent)
    commentContent.$inject = [];
    function commentContent(){
    return {
        restrict: 'EA',
        // template:
        // '<div>'+
        // '<div class="sem"">'+
        // '<div class="circle"">{{commentContent.term}}</div>'+
        // '</div>' +
        // '<div style="display:none" ng-show="isShow">'+
        //     '<div ng-transclude></div>'+'</div>'+
        // '</div>',
        // replace: true,
        transclude: true,
        scope:{
            commentContent:"=",
            isShow:"@",
        },
        templateUrl:"components/uiComponents/commentContent/commentContent.tpl.html",
        controller: function ($scope) {
            $scope.show = function () {
                // $scope.isShow = !$scope.isShow;
                if($scope.isShow == 'true'){
                    $scope.isShow = 'false';
                }else{
                    $scope.isShow = 'true';
                }
            }
        },
    };
    };
}());



<div>
    <div class="sem" ng-class="{active:isShow == 'true'}">
        <div class="circle" ng-click="show()">{{commentContent.term}}</div>
    </div>
    <div ng-show="isShow == 'true'">
        <div ng-transclude></div>
    </div>
</div>

如上,我写了个组件,然后我调用的时候使用ng-repeat调用
<ui-component-comment-content ng-repeat="commentContent in ctrl.commentContents" is-show="{{$index == 0}}" comment-content="commentContent">
    <ui-component-comment-content-text ng-repeat="commentContentText in commentContent" comment-content-text="commentContentText"></ui-component-comment-content-text>
</ui-component-comment-content>


现在做到了点击能单个的展示或者隐藏,怎么做到点击展示其中一个但是隐藏其他的呀?

我没非常仔细得看,暂时说几点:
1,我猜测你在你的controller里写了$scope.show的方法, 而没有贴出来, directive中的controller并不是你想的那种用法, 所以directive中的controller用你的那种方法是不会调用的。
2,写法方面 $scope.isshow = !$scope.isshow就可以了, 你觉得呢。
3,完成你的需求需要嵌套指令, 你可以参考一下angular-bootstrap的手风琴写法
4,如果我空下来回来还没有人解答你我可以稍微给你写个大概思路


点击时传个$index进去,判断展开隐藏时多判断一下当前index跟传进去了index相不相等

【热门文章】
【热门文章】