AngularJS多个动态指令绑定
AngularJS multiple dynamic directives binding
我是AngularJS的新手,我太笨了,无法让它工作。
我正在尝试生成
- 面板列表(动态)
- 当我单击面板标题时,面板主体将展开/折叠
- 当特定的面板主体折叠时,我想创建一个表并将一些数据绑定到其中
这是我的代码
<script>
var app = angular.module('TestApp', []);
app.controller('TestCtrl', function ($scope) {
$scope.parents = [
{ id: '1', name: 'Test Parent 1', count: '2' },
{ id: '2', name: 'Test Parent 2', count: '3' },
{ id: '3', name: 'Test Parent 3', count: '1' }
];
$scope.parent_click = function (parent) {
var children_list = [
{ id: '1', parent_id: '1', name: 'Test Child 1' },
{ id: '2', parent_id: '1', name: 'Test Child 2' },
{ id: '3', parent_id: '2', name: 'Test Child 3' },
{ id: '4', parent_id: '2', name: 'Test Child 4' },
{ id: '5', parent_id: '2', name: 'Test Child 5' },
{ id: '6', parent_id: '3', name: 'Test Child 6' }
];
var directive_name = 'clschild_' + parent.id;
app.directive(directive_name, function () {
var child_html = '<div class="panel-body"> '
<table ng-attr-id="tblchild_'+ parent.id + '" class="table table-hover"> '
<thead> '
<tr> '
<td>Name</td> '
</tr> '
</thead> '
<tbody> '
<tr ng-repeat="child in children"> '
<td>{{child.name}}</td> '
</tr> '
</tbody> '
</table> '
</div>';
return {
template: child_html,
link: function (scope) {
scope.$apply(function () { scope.children = children_list; });
}
}
});
};
});
</script>
<div ng-app="TestApp" ng-controller="TestCtrl">
<div class="panel panel-default" ng-repeat="parent in parents">
<div class="panel-heading clearfix">
<a id="testtest" data-toggle="collapse" ng-href="#divchild_{{parent.id}}" ng-click="parent_click(parent);" class="pull-left" style="padding-top: 7.5px;">{{parent.name}}</a>
</div>
<div ng-attr-id="divchild_{{parent.id}}" class="panel-collapse collapse">
<div class="clschild_{{parent.id}}">
<div class="panel-body">
aaa
</div>
</div>
</div>
</div>
</div>
我想将数据绑定到相应父级的面板主体。我怎样才能做到这一点?
编辑:问题-现在,当我点击面板标题时,面板主体展开,但只显示"aaa"。我无法将子列表绑定到面板主体。
感谢
因此,可以在这里跟踪单击的父id,并通过传递单击的父id来过滤ng-repeat
中的子列表。
$scope.clicked_parent = 0;
$scope.parents = [
{ id: '1', name: 'Test Parent 1', count: '2' },
{ id: '2', name: 'Test Parent 2', count: '3' },
{ id: '3', name: 'Test Parent 3', count: '1' }
];
$scope.children_list = [
{ id: '1', parent_id: '1', name: 'Test Child 1' },
{ id: '2', parent_id: '1', name: 'Test Child 2' },
{ id: '3', parent_id: '2', name: 'Test Child 3' },
{ id: '4', parent_id: '2', name: 'Test Child 4' },
{ id: '5', parent_id: '2', name: 'Test Child 5' },
{ id: '6', parent_id: '3', name: 'Test Child 6' }
];
$scope.isParentTagClicked = false;
$scope.set_parent_id = function(_id){
$scope.isParentTagClicked = !$scope.isParentTagClicked;
if ($scope.isParentTagClicked){
$scope.clicked_parent = _id;
}else{
$scope.clicked_parent = 0;
}
};
并像一样声明视图
<div class="panel panel-default" ng-repeat="parent in parents">
<div class="panel-heading" ng-click="set_parent_id(parent.id)">{{parent.name}}</div>
<div class="panel-body" ng-repeat="child in children_list" ng-show="child.parent_id == clicked_parent" ng-if="child.parent_id == parent.id">
{{child.name}}
</div>
</div>
相关文章:
- 将指令绑定到控制器属性
- 角度指令:绑定'鼠标悬停'事件添加到元素
- 离子/角度指令绑定到滚动
- ng使用UI引导指令绑定html
- angularjs指令绑定带参数的函数
- 单元测试 Karma Jasmine 语法错误:在“&”角度指令绑定上解析错误
- 角度指令绑定到元素的高度
- 将 AngularJS 指令绑定到元素
- 角度指令绑定
- 将属性从一个指令绑定到另一个指令
- AngularJS多个动态指令绑定
- 在AngularJS中,如何将指令绑定到指令以外的元素中's根元素
- 调用与angular指令绑定的参数化函数
- 指令绑定中的值是正确的,但它'It’’It’这不是真的
- AngularJS指令绑定链接:无法访问作用域变量
- 如何使选项从选择指令绑定到另一个数组
- 把一个指令绑定到另一个指令里的方式是什么?
- 如何将控制器中的指令绑定到HTML中
- AngularJS指令绑定
- 访问指令绑定到的元素