基于ng表行单击更改uib选项卡集内容
Change uib-tabset content based on ng-table row click
我是Angularjs和web编程的新手,但我在这方面取得了一些进展。
所以,我有一个ng表,我有ng点击工作,这样它就改变了所选行的颜色,但我也希望选项卡的内容在同一次点击的基础上改变。
到目前为止我所拥有的:
index.html
<style>
.selected {
background-color:black;
color:white;
font-weight:bold;
}
</style>
<div ng-app="app" ng-controller="ctrl">
<table ng-table="tableParams" class="table table-bordered ">
<tr ng-repeat="user in $data" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index, user.information)">
<td data-title="'First Name'">{{user.firstName}}</td>
<td data-title="'Last Name'">{{user.lastName}}</td>
</tr>
</table>
<uib-tabset type="pills">
<uib-tab ng-repeat="tab in tabs"
heading="{{tab.name}}"
active=tab.active>
{{tab.content}}
</uib-tab>
</uib-tabset>
</div>
myStuff.js
angular.module('app', ['ngTable'])
.controller('ctrl', function($scope, NgTableParams) {
$scope.names = [{"firstName": "John", "lastName": "Doe", "information": "Alpha"},
{ "firstName": "Mary", "lastName": "Manson", "information": "Bravo"},
{"firstName": "Bob", "lastName": "Smith", "information": "Charlie"}];
$scope.tableParams = new NgTableParams({
count: 20
}, {
data: $scope.names
});
$scope.setClickedRow = function(index, information){
$scope.selectedRow = index;
$scope.information = information;
//now I want to set the tab content to the value of information, my first guess was this below, that doesn't work.
//$scope.tabs.content = $scope.information;
}
$scope.tabs = [{id: 1, name: "heading", active:true, content: "no user selected."},
{id: 2, name: "heading2", active:false, content: "static content"}];
});
所以,如果你看看setClickedRow
函数,我有一些意见,我认为这应该去哪里,还有我尝试过的一件事,但我似乎无法完全做到。
目标是只具有id或1的heading
选项卡,以便在names
数组中设置任何信息。因此,例如,如果用户选择了Mary Manson行,我希望heading
选项卡包含"Alpha"的内容。
我有一个jsfiddle,但我实际上并没有让tabset在其中工作b/c我也是jsfiddler的新手。。。。但也许展示它会有所帮助。
如果您知道需要设置其内容的选项卡的索引,则可以使用$scope.tabs[someIndex].content = $scope.information;
。
如果不是,但您知道选项卡的属性(如名称),则可以使用.filter(),如下所示:$scope.tabs.filter(function(t){ return t.name == 'heading'; })[0].content = $scope.information;
如果您可以将选项卡作为参数传递给您的方法(在这种情况下,它看起来不像您可以,但仅供参考),那么您可以简单地说tab.content = $scope.information;
。
我并没有真正理解这个问题,但我观察到您的ng-controller
元素没有包装<uib-tabset>
元素。因此,<uib-tabset>
元素甚至没有试图传递tabs
的控制器的作用域。试着这样做。至少可以部分解决你的问题。
<div ng-app="app" ng-controller="ctrl">
<table ng-table="tableParams" class="table table-bordered ">
<tr ng-repeat="user in $data" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index, user.information)">
<td data-title="'First Name'">{{user.firstName}}</td>
<td data-title="'Last Name'">{{user.lastName}}</td>
</tr>
</table>
<uib-tabset type="pills">
<uib-tab ng-repeat="tab in tabs"
heading="{{tab.name}}"
active=tab.active>
{{tab.content}}
</uib-tab>
</uib-tabset>
</div>
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 通过js在新选项卡中有条件地打开url
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 无法在Ionic select中预先选择最后一个选项
- 如何在选项卡上定义属性'的主窗口对象
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 使用此选项选择父类内部的类
- CKeditor:更改对话框中的默认选择选项
- JQuery覆盖不更改单选选项
- 活动选项卡's源代码-获取变量s值
- 绑定时将Parsley minlength消息作为选项传递时,未对其进行自定义
- 如何从选择框中的选项中获取属性值
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- 基于ng表行单击更改uib选项卡集内容
- AngularJS uib日期选择器没有'在uib选项卡中,不要在第一次打开/关闭事件之后显示日历
- 如何使其他指令在uib选项卡元素中工作