हेडर भाग

Question

में बटन के साथ कोणीय यूआई accordion मैं http://angular-ui.github.com/bootstrap/ से accordion निर्देश का उपयोग कर रहा हूं और मुझे हेडर भाग में दो बटन होने चाहिए।

1. जोड़ें - मूल के नीचे बिल्कुल वही accordion बनाएं।
2. निकालें - accordion निकालें। (पहला accordion हटाया नहीं जा सकता - निकालें बटन अक्षम करें)।

मैं अंगुलरजेएस के लिए नया हूं और कृपया इसे प्राप्त करने में मेरी सहायता करें।

Answer 1

काम कर रहे plunker देखें।

तुम सिर्फ एक ऐड की जरूरत है और अपने नियंत्रक

$scope.addGroup = function(idx, group, e) { 
    if (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 

    var newGroup = angular.copy(group); 
    newGroup.no = $scope.groups.length + 1; 
    $scope.groups.splice(idx + 1, 0, newGroup); 
    }; 

    $scope.removeGroup = function(idx, e) { 
    if (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 

    $scope.groups.splice(idx, 1); 
    }; 

और अपने html के लिए एक ng-repeat में समारोह को दूर:

<accordion close-others="oneAtATime"> 
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups"> 
     <accordion-heading> 
      {{ group.title }} ({{group.no}}) 
      <button class="btn btn-small" ng-click="addGroup($index, group, $event)">+</button> 
      <button class="btn btn-small" ng-click="removeGroup($index, $event)" ng-show="$index">-</button> 
     </accordion-heading> 
     {{group.content}} 
    </accordion-group> 
    </accordion> 

Answer 2

डाल सिर्फ इस e.originalEvent.cancelBubble = true

$scope.addGroup = function(idx, group, e) { 
    if (e) { 
     e.originalEvent.cancelBubble=true; 
    } 
    var newGroup = angular.copy(group); 
    newGroup.no = $scope.groups.length + 1; 
    $scope.groups.splice(idx + 1, 0, newGroup); 
    }; 

    $scope.removeGroup = function(idx, e) { 
    if (e) { 
     e.originalEvent.cancelBubble=true; 
    } 

    $scope.groups.splice(idx, 1); 
    };