物品扩展时如何发生火灾事件？
物品扩展时如何发生火灾事件？
提问于 2016-05-17 16:15:56
我在我的angularjs项目中使用了引导手风琴。
这是工作柱塞
当我展开手风琴时，我希望在我的控制器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");
};例如：
如果扩展了具有标题文本“Dynam-2”的手风琴项，我希望触发fireOnExpand事件处理程序并传递给事件适当的Id(即Id=8)。
在扩展手风琴项目时，如何激发函数fireOnExpand并传递适当的Id参数？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-05-19 17:52:04
请参阅事件冒泡
改变这个
<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-click移动到strong标记。
<span>
<div class="text-center text-info">
<strong ng-click="fireOnExpand(group.Id)">{{group.title}}</strong>
</div>
</span>Stack Overflow用户
发布于 2016-05-17 17:51:25
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37281494
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号