要实现多个父子标签之间的激活状态切换,可以使用AngularJS的指令来处理。
以下是一个示例代码,演示了如何使用AngularJS指令来实现多个父子标签的激活状态切换:
HTML代码:
{{ parent.name }}
- {{ child.name }}
JavaScript代码:
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.parents = [
{ name: 'Parent 1', active: false, children: [
{ name: 'Child 1-1' },
{ name: 'Child 1-2' },
{ name: 'Child 1-3' }
]},
{ name: 'Parent 2', active: false, children: [
{ name: 'Child 2-1' },
{ name: 'Child 2-2' }
]},
{ name: 'Parent 3', active: false, children: [
{ name: 'Child 3-1' },
{ name: 'Child 3-2' },
{ name: 'Child 3-3' },
{ name: 'Child 3-4' }
]}
];
$scope.toggleActive = function(parent) {
parent.active = !parent.active;
};
});
在这个示例中,$scope.parents
数组包含了父标签的数据。每个父标签都有一个active
属性来表示是否激活。当父标签被点击时,toggleActive()
方法会被调用,从而切换父标签的激活状态。当父标签处于激活状态时,相应的子标签会被显示出来。
通过使用ng-repeat
指令,可以动态地生成父标签和子标签的HTML代码。
注意:上述代码只是一个示例,你可以根据实际需求进行修改和扩展。