- 首页
- 前端开发
- Angular-ui-bootstrap -- 无法禁用 ng-repeat 中的选项卡
Angular-ui-bootstrap -- 无法禁用 ng-repeat 中的选项卡
[英] Angular-ui-bootstrap -- unable to disable tabs inside ng-repeat
本文介绍了Angular-ui-bootstrap -- 无法禁用 ng-repeat 中的选项卡的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
全部.
我正在使用 angular 和 ui-bootstrap 创建一个选项卡菜单,(希望)用户可以在其中启用/禁用他们不需要的选项卡.我试图非常严格地遵守模板代码,并实现我自己的功能来禁用单击选项卡,但我无法让我的选项卡以与示例中相同的方式响应.我一直在阅读并猜测它与 ng-repeat 创建自己的范围有关,但我还没有解决它.任何帮助将不胜感激!
我试图在这个plunker中展示我正在处理的事情.>
相关控制器代码:
$scope.theirTabs = [{ title:'动态标题 1', content:'动态内容 1' },{ 标题:'动态标题 2',内容:'动态内容 2',禁用:true }];$scope.myTabs = [{ title:'订单',内容: {描述:'描述',poNumber: 'PO_NUMBER',origFacility: 'ORIGIN_FACILITY',destName: 'D_NAME',destCity: 'D_CITY' ,运输类型:'TRAN_TYPE',运输代码:'TRAN_CODE'},禁用:假},{ title:'库存',内容: {createdDateTime: 'CREATED_DATE_TIME',用户名:'USER_NAME'},禁用:假},{ 标题:'物品',内容: {分配数量:'ALLOCATED_QTY',单位包装:'UNITS_PAKD',装运数量:'SHIPPED_QTY'},禁用:假},{标题:'活动',内容: {订单号:'ORDER_NUMBER',poNumber: 'PO_NUMBER',origFacility: 'ORIGIN_FACILITY'},禁用:真}];$scope.disableTab = 函数(标签,索引){tab.disabled = true;console.log('tab at index ' + index + ' 应该被禁用');};
相关的 html(这里只包含我的):
<div ng-repeat="tab in myTabs track by $index" class="select-tables-checkboxes col-md-3"><!-- <label for="select-tables">{{tab.title}}</label>--><按钮类型=按钮"名称=选择表"id="选择表"ng-click="myTabs[$index].disabled = !myTabs[$index].disabled">启用/禁用{{tab.title}}<!-- 也试过 ng-click="disableTab(tab, $index)" -->
<标签集><tab ng-repeat="tab in myTabs" Heading="{{tab.title}}" active="tab.active" ng-disabled="tab.disabled"><!-- <div class="row" ng-repeat="(key, value) in content track by $index"></div>--><div class="row" ng-repeat="(k, v) in tab.content"><div class="column-exists-checkbox col-md-1"><输入类型=复选框"名称=列存在"id="列存在"ng-model="columnExists">
<div class="column-description col-md-4"><p class="column-description"><strong>{{k}}</strong></p>
<div class="column-name col-md-7"><输入类型="文本"名称=列名"id="列名"value="{{v}}">
<!-- </div>--></tab></tabset>
顺便说一句,当我运行我的代码并单击我自己的按钮来禁用/启用选项卡(我意识到我只使用 $scope.disableTab 函数进行了禁用)时,我得到了正确的控制台输出,即 '当我单击订单"按钮时,索引 0 处的选项卡应该被禁用,依此类推.
预先感谢您提出的任何建议!
解决方案
对于 tab 指令,你应该使用 disable
属性
all.
I am using angular and ui-bootstrap to create a menu of tabs on which (hopefully) a user can enable/disable tabs that they do not need. I have tried to adhere pretty closely to the template code, as well as implementing my own functions to disable the tabs on click, but I haven't been able to get my tabs to respond the same way that they do in the example. I have been reading around and would guess that it has something to do with the ng-repeat creating its own scope, but I haven't solved it yet. Any help would be much appreciated!
I have tried to demonstrate what I am dealing with in this plunker.
Relevant controller code:
$scope.theirTabs = [
{ title:'Dynamic Title 1', content:'Dynamic content 1' },
{ title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
];
$scope.myTabs = [
{ title:'Orders',
content: {
description: 'DESCRIPTION',
poNumber: 'PO_NUMBER',
origFacility: 'ORIGIN_FACILITY',
destName: 'D_NAME',
destCity: 'D_CITY' ,
transitType: 'TRAN_TYPE',
transitCode: 'TRAN_CODE'
},
disabled: false
},
{ title:'Inventory',
content: {
createdDateTime: 'CREATED_DATE_TIME',
userName: 'USER_NAME'
},
disabled: false
},
{ title:'Items',
content: {
allocatedQty: 'ALLOCATED_QTY',
unitsPacked: 'UNITS_PAKD',
shippedQty: 'SHIPPED_QTY'
},
disabled: false
},
{ title:'Activity',
content: {
orderNumber: 'ORDER_NUMBER',
poNumber: 'PO_NUMBER',
origFacility: 'ORIGIN_FACILITY'
},
disabled: true
}
];
$scope.disableTab = function(tab, index) {
tab.disabled = true;
console.log('tab at index ' + index + ' should be disabled');
};
Relevant html (only mine included here):
<div class="row">
<div ng-repeat="tab in myTabs track by $index" class="select-tables-checkboxes col-md-3">
<!-- <label for="select-tables">{{tab.title}}</label> -->
<button type="button"
name="select-tables"
id="select-tables"
ng-click="myTabs[$index].disabled = ! myTabs[$index].disabled">Enable / Disable {{tab.title}}
<!-- also tried ng-click="disableTab(tab, $index)" -->
</div>
</div>
<tabset>
<tab ng-repeat="tab in myTabs" heading="{{tab.title}}" active="tab.active" ng-disabled="tab.disabled">
<!-- <div class="row" ng-repeat="(key, value) in content track by $index"></div> -->
<div class="row" ng-repeat="(k, v) in tab.content">
<div class="column-exists-checkbox col-md-1">
<input type="checkbox"
name="column-exists"
id="column-exists"
ng-model="columnExists">
</div>
<div class="column-description col-md-4">
<p class="column-description"><strong>{{k}}</strong></p>
</div>
<div class="column-name col-md-7">
<input type="text"
name="column-name"
id="column-name"
value="{{v}}">
</div>
</div>
<!-- </div> -->
</tab>
</tabset>
Incidentally, when I run my code and click my own buttons to disable/enable tabs (which I realize I've only coded to disable with the $scope.disableTab function), I am getting the correct console output, i.e. 'tab at index 0 should be disabled' when I click the Orders button, and so on.
Thank you in advance for any suggestions you may have!
解决方案
For the tab directive, you should be using the disable
attribute
<tab ng-repeat="tab in myTabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
这篇关于Angular-ui-bootstrap -- 无法禁用 ng-repeat 中的选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!