AngularJS 및 부트 스트랩을 사용하여 패널 내부의 그룹 패널

이 답변을 찾을 수 없거나 적절한 장소에서 찾고있는 것이 아닙니다. 그러나 몇 가지 그룹을 구성 할 수있는 방법을 찾으려고합니다. AngularJS와 Bootstrap을 사용하여 하나의 대형 패널 안의 요소 (패널).AngularJS 및 부트 스트랩을 사용하여 패널 내부의 그룹 패널

예를 들어, 저는 고객 접촉 양식을 나타내는 약 60 개 정도의 미니 패널을 가지고 있습니다. 이 모든 형태는 하나의 큰 패널 안에 ng-repeat과 함께 있습니다. 나는 어떻게 든 드롭 다운 컨트롤에서 다른 기준 (예 : 상태 코드 또는 회사 유형 등)별로 내 연락처를 그룹화하려고합니다.

나는 모든 연락처가 .page-header (아래의 예제와 비슷한 설정)에 의해 하나 개의 패널에 표시하지만, 분리 할 수 싶습니다

이 사람이 어디의 예를 보지 않았거나, 이것이 어떻게 달성 될 수 있는지에 대한 세부 사항이 있습니까?

출처

2016-06-28 Riples

당신은 Array#reduce, ng-repeat-start 및 ng-repeat-end 사용 그룹에 의해 배열을 사용할 수있다 :

HTML을 (I는 설명을 목적으로 여기 부트 스트랩의 패널을 사용) :

<body ng-app="MyApp"> 
    <div ng-controller="MyCtrl"> 
    <div class="panel panel-default"> 
     <div class="panel-heading" ng-repeat-start="(group, values) in groupedData"> 
     {{ group }} 
     </div> 
     <div class="panel-body" ng-repeat-end ng-repeat="value in values"> 
     {{ value.name }} 
     </div> 
    </div> 

    </div> 
</body>

자바 스크립트 :

angular.module('MyApp', []).controller('MyCtrl', ['$scope', function($scope){ 

    var rawData = [{ 
    "name": "A1", 
    "group": "A" // For simplicity, my grouping criteria is called 'group' 
    },{ 
    "name": "A2", 
    "group": "A" 
    },{ 
    "name": "A3", 
    "group": "A" 
    },{ 
    "name": "B1", 
    "group": "B" 
    },{ 
    "name": "C1", 
    "group": "C" 
    },{ 
    "name": "C2", 
    "group": "C" 
    }]; 

    // Perform a Group-by on the rawData: {"A": [{...}], ...} using Array#reduce 
    $scope.groupedData = rawData.reduce(function(accumulator, value){ 
    if(!accumulator[value.group]) accumulator[value.group] = []; 
    accumulator[value.group].push(value); 
    return accumulator; 
    }, {}); 

}]);

JSBin 예 : http://jsbin.com/gigerilope/edit?html,js,output

편집 :

가 어떤 버튼 클릭시이 그룹을 트리거하려면 우리가 먼저 버튼을 추가하고 ng-click 핸들러 바인딩 : 확장 된 질문에 대답 컨트롤러에

<button class="btn btn-default" ng-click="performGrouping()"> 
    Perform Grouping 
</button>

을 대신 할당

$scope.groupedData = null; 
    $scope.performGrouping = function() { 
    $scope.groupedData = rawData.reduce(function(accumulator, value) { 
     if (!accumulator[value.group]) accumulator[value.group] = []; 
     accumulator[value.group].push(value); 
     return accumulator; 
    }, {}); 
    };

N : 그룹화 된 데이터를 즉시, 우리는 ng-click에서 호출 될 수 처리 기능에 포장 오우 우리는 버튼을 클릭하기 전에 "어떤 그룹화"를 표시하지 싶어, 그래서 우리는 이야기를 알려줄 수있는 <div> 패널을 추가, 모두 패널을 볼 수있다

<div class="panel panel-default"> 
    <div class="panel-body"> 
    No Grouping Yet 
    </div> 
</div>

이 시점을 - 우리가 하나를 표시해야 시간.

결과 패널 :

<div class="panel panel-default" ng-show="groupedData">

"아니오 그룹화"패널 : 진실 검사 $scope.groupedData 좋은 생각이 될 것

<div class="panel panel-default" ng-hide="groupedData">

그러나 rawData는 하늘의 배열, groupedData 인 경우 빈 오브젝트 {}이되며, 이는 true으로 해석됩니다. groupedData에있는 키 수를 확인하기 위해 키 확인을 할 수 있습니다.

$scope.keys = function(obj) { 
    return obj && Object.keys(obj); 
};

그리고 다시 템플릿 HTML을 업데이트 : 이렇게하려면, 우리는 열쇠를 반환하는 함수를 추가해야

결과 패널 :

<div class="panel panel-default" ng-show="keys(groupedData).length">

"아니오 그룹화"패널 :

<div class="panel panel-default" ng-hide="keys(groupedData).length">

그리고 우리는 지금 좋을 것입니다.

JS 답답해 : https://jsfiddle.net/kazenorin/Ler7p6fe/

출처

2016-06-28 03:06:20 kazenorin

나는 이것을 당신의 예제와 함께 테스트 해 보았는데, 훌륭하게 작동합니다. 요청에 따라 호출되는 메서드에이 기능을 첨부하는 방법을 설명 할 수 있습니까? 예를 들어, '그룹화 안 함'을 표시하면 시작하고 그룹화는 요청한 경우에만 표시됩니다 (예 : 버튼 클릭). – Riples

확장 질문에 해결책 추가 – kazenorin

이것은 아주 좋습니다! 자세한 답변을 드릴 시간을 주셔서 감사합니다. 나의 각성 기술은 아직 진행 중이며, 내 지식을 구축하는 데 도움이되는 답변입니다. 다시 한 번 감사드립니다! – Riples

AngularJS 및 부트 스트랩을 사용하여 패널 내부의 그룹 패널

답변

관련 문제