带下拉菜单的Angular Pills
Angular Pills with dropdown
我想用下拉菜单创建有角度的药丸。我已经做到了,但问题是只有跨度或a是可点击的,而不是药丸的其余部分。然而,如果我点击药丸,它仍然会高亮显示药丸,但不会完成我点击它时必须完成的任务。我如何才能实现整个跨度都是可点击的,而不仅仅是文本。
以下是我的代码:
<div data-tabset="" type="pills">
<div style="height: 80px" data-tab="" data-active="item.active" data-ng-repeat="item in items" data-ng-if="(item.Processes.length >= 1)">
<div data-tab-heading="">
<span style="height: 80px" class="dropdown" ng-if="(item.Processes.length > 1)">
<span class="dropdown-toggle">
{{item.Name}}
</span>
<ul class="dropdown-menu">
<li ng-repeat="proc in item.Processes">
<a dropdown-toggle ng-click="Function2(item.ID,proc.UniqueID)">{{proc.Description}}</a>
</li>
<li>
<a dropdown-toggle ng-click="Function1(item.ID,-1)">all</a>
</li>
</ul>
</span>
<span style="height: 80px" ng-if="(item.Processes.length == 1)" ng-click="Function1(item.ID,item.proc.UniqueID)">{{item.Name}}</span>
</div>
</div>
</div>
通过在所有跨度上添加一个函数来解决此问题,该函数检查选择了什么值,取消选择所有值并选择该值。这并不是说点击现在有效,但至少现在没有选择错误的点击。
Html:
<div data-tabset="" type="pills">
<div data-ng-if="(subsidiaries.length == 0)"><h2>U heeft geen werkmaatschappijen om te tonen</h2></div>
<div style="height: 80px" data-tab="" data-active="sub.active" data-ng-repeat="sub in subsidiaries" data-ng-click="setPillSelected()" data-ng-if="(sub.Processes.length >= 1)">
<div data-tab-heading="">
<span style="height: 80px" class="dropdown" dropdown ng-if="(sub.Processes.length > 1)">
<span class="dropdown-toggle" dropdown-toggle>
{{sub.Name}}
</span>
<ul class="dropdown-menu">
<li ng-repeat="proc in sub.Processes">
<a ng-click="generateFunnelData(sub.SubsidiaryID,proc.SubsidiaryProcessID, true)">{{proc.Description}}</a>
</li>
<li>
<a ng-click="generateFunnelData(sub.SubsidiaryID,-1, true)">alles</a>
</li>
</ul>
</span>
<span style="height: 80px" ng-if="(sub.Processes.length == 1)" ng-click="generateFunnelData(sub.SubsidiaryID,sub.proc.SubsidiaryProcessID, true)">{{sub.Name}}</span>
</div>
</div>
</div>
javascript端:
setPillSelected: function () {
var self = this;
self.$.subsidiaries.forEach(function(subsidiary) {
if (subsidiary.SubsidiaryID == self.$.subsidiary.SubsidiaryID) {
subsidiary.active = true;
} else {
subsidiary.active = false;
}
});
},
我希望它能帮助其他人
相关文章:
- Angular JS IE9 Hashbang url rewriting
- 如何使用skip参数使用angular ui引导进行服务器端分页
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 使用angular重定向到html页面
- angular.js没有'无法在PhoneGap中处理视图标记
- Javascript(Angular)从一个对象数组到第二个数组查找值
- angular 1.5应用程序中的导航栏
- angular的下拉菜单
- Angular只从数组中获取所需的数据
- 如何将不可变的js导入angular 2(alpha)
- Angular js-返回一个包含类似
- 如何使用 Angular JS 将数据保存在数据库中
- 将JSON对象传递给angular指令
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- Angular:更新一次性绑定的数据
- 同步调用,直到用户通过angular验证为访问者
- 将Angular js与taglib结合使用
- 在Angular Fullstack中设置TinyMCE
- 带下拉菜单的Angular Pills