項目擴展時如何觸發事件？

我在我的angularjs項目引導手風琴中使用。項目擴展時如何觸發事件？

這裏工作plunker

當我展開的手風琴我想火在我的名爲fireOnExpand控制器功能，並通過該組的適當Id的功能。

這是我如何用手風琴：從控制器

<div ng-controller="MainCtrl"> 
    <uib-accordion> 
     <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups" ng-init="isOpen = $first" is-open="isOpen"> 

     <uib-accordion-heading> 
      <span ng-click="fireOnExpand()"></span> 
      <div class="text-center text-info"> 
      <strong>{{group.title}}</strong> 
      </div> 
     </uib-accordion-heading> 
     {{group.content}} {{test}} 
     </uib-accordion-group> 
    </uib-accordion>

以下是項目所顯示：

$scope.groups = [ 
    {Id: 5, title: "Dynamic-1", content: "Dynamic Group Body - 1"}, 
    {Id: 8, title: "Dynamic-2", content: "Dynamic Group Body - 2"}, 
    {Id: 1, title: "Dynamic-3", content: "Dynamic Group Body - 3"}, 
    {Id: 3, title: "Dynamic-4", content: "Dynamic Group Body - 4"}];

這裏的功能控制器，我不會火上展開：

$scope.fireOnExpand = function() 
    { 
    alert("ParamPamPam"); 
    };

例如：

如果擴展了標題文本「Dynamic-2」的手風琴項目，我希望觸發fireOnExpand事件處理程序並將事件傳遞給適當的Id（即， ID = 8）。

當手風琴項目被展開時，我應如何觸發功能fireOnExpand並通過適當的Id參數？

來源

2016-05-17 Michael

看到Event Bubbling

改變這種

<span ng-click="fireOnExpand()"></span> 
<div class="text-center text-info"> 
    <strong>{{group.title}}</strong> 
</div>

到

<span ng-click="fireOnExpand(group.Id)"> 
    <div class="text-center text-info"> 
     <strong>{{group.title}}</strong> 
    </div> 
</span>

，如果你要執行fireOnExpand在標題文本只，然後移動NG-點擊strong標籤

<span> 
     <div class="text-center text-info"> 
      <strong ng-click="fireOnExpand(group.Id)">{{group.title}}</strong> 
     </div> 
</span>

Plunker

來源

2016-05-19 17:52:04

帕萬感謝您的答案，很酷！當第一個項目展開後，有沒有什麼辦法可以啓動fireOnExpand函數？ – Michael

你在尋找這個https://plnkr.co/edit/RLCQ0ALXZS8ufek3bTwv?p=preview –

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) { 
 
    $scope.oneAtATime = true; 
 
    $scope.lastSelected= 0; 
 
    $scope.firstLoad =false; 
 

 
    
 
    $scope.groups = [{ 
 
     Id:2, 
 
    title: "Dynamic Group Header - 1", 
 
    content: "Dynamic Group Body - 1" 
 
    }, { 
 
    Id:52, 
 
    title: "Dynamic Group Header - 2", 
 
    content: "Dynamic Group Body - 2" 
 
    }, { 
 
    Id:23, 
 
    title: "Dynamic Group Header - 3", 
 
    content: "Dynamic Group Body - 3", 
 
    },{ 
 
    Id:78, 
 
    title: "Dynamic Group Header - 4", 
 
    content: "Dynamic Group Body - 4" 
 
    }]; 
 
    
 
    
 

 
    $scope.fireOnExpand = function(id){ 
 
    
 
     if ($scope.firstLoad === false){ 
 
      if (id !== $scope.lastSelected || $scope.lastSelected !== 0){ 
 
      $scope.lastSelected = id; 
 
      alert(id); 
 
      } 
 
      else { 
 
       alert("Do nothing"); 
 
      } 
 
      
 
      $scope.firstLoad = true; 
 
      
 
     } 
 
     else { 
 
      if (id !== $scope.lastSelected){ 
 
       $scope.lastSelected = id; 
 
       alert(id); 
 
      } 
 
      else { 
 
      alert("Do nothing"); 
 
      } 
 
      
 
      
 
     } 
 
    
 
    
 
    
 
    }; 
 
    
 
});

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script> 
 
    <script src="example.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="AccordionDemoCtrl"> 
 
    <uib-accordion close-others="oneAtATime"> 
 
     <uib-accordion-group heading="{{group.title}}" ng-click="fireOnExpand($index)" ng-repeat="group in groups" is-open="$first">{{group.content}}</uib-accordion-group> 
 
    </uib-accordion> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-05-17 17:51:25

納齊爾，感謝但對於第一個元素？ – Michael

我將lastSelected設置爲零。其默認選定的第一個元素。如果你運行代碼，你可以看到這一點。當你點擊第一個元素時。它給你喜歡已經點擊。 –

嗯，我現在明白你的意思。我在找這 –

項目擴展時如何觸發事件？

回答

相關問題