angular 利用控制器中的变量动态生成tab选项卡

最新推荐文章于 2023-07-01 14:16:29 发布

xiaobing_hope

最新推荐文章于 2023-07-01 14:16:29 发布

阅读量3.3k

点赞数

分类专栏： angularJs

本文链接：https://blog.csdn.net/xiaobing_hope/article/details/50676425

版权

angularJs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

angular---利用控制器中的变量动态生成tab选项卡

需要达到的效果图：

1.首先是自定义标签，在模板中生成相应内容

html代码：

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../vendor/angular.min.js"></script>
</head>
<body ng-controller="navCtrl">
    <tab active="0" tabs="tabs"></tab>
</body>
</html>

其中tab为自定义标签，需要在控制器中自定义。

2. 控制器中全局参数tabs：

angular.module("app",[]).controller('BodyCtrl',function($scope){
    $scope.tabs = [
        {tab:'关注',cont:''},
        {tab:'推荐',cont:''},
        {tab:'导航',cont:''},
        {tab:'视频',cont:''},
        {tab:'购物',cont:''}
    ];
});

取控制器tabs中的内容呈现为选项卡的形式

3. 自定义tab标签

directive('tab',function($http){
        return {
            restrict: 'E',
            scope:{
//               = 双向数据绑定（tabs可以直接使用和变更父级作用域的tabs，同时）
                tabs:'=',
//               @ 单向数据绑定（父级作用域没有active变量，不需要向父级作用域传递改变量）
                active:'@'
            },
            template:'<div class="tab">'+
            '<ul>'+
            '<li ng-repeat="tab in tabs track by $index" ng-click="changeTab(tab,$index)" ng-class="{active: active == $index }" >{{tab.tab}}</li>'+
            '</ul>'+
            '<div class="content">{{cons}}</div>'+
            '</div>',
            replace: true,

先写好自定义标签的模板，然后引入

注：template为自定义标签的模板，tab的结构为：

<div class="tab">
    <ul>
        <li ng-repeat="tab in tabs track by $index" ng-click="changeTab(tab,$index)" ng-class="{active: active == $index }">{{tab.tab}}</li>
    </ul>
    <div class="content"></div>
</div>

4. 在自定义标签的link参数下定义函数及事件，可以使用控制器中的变量（scope定义了自定义标签变量的作用域）

    link:function(scope){
             var rUrl = '../t/tjson/json/text.json';
             $http.get(rUrl).success(function(response){
                 console.log(response);
                 scope.cons = response[scope.active].Name;
             });
//            scope.cons = scope.tabs[scope.active].cont;
        scope.changeTab = function(tab,index){
            scope.cons = tab.cont;
            scope.active = index;
                 $http.get(rUrl).success(function(response){
                      console.log(response);
                      scope.cons = response[index].Name;
                 });
        };

自定义标签html中，默认active为0，表示默认选中第一个选项，此时给选中的选项添加active的class属性

显示内容： scope.cons = scope.tabs[scope.active].cont;

当然如果是从服务器拉取的数据，则在发送请求，处理之后的数据显示在内容区

点击相应选项卡，触发changeTab事件，改变选中选项卡的class属性，加载相应内容

整体js代码：

<script>
//将请求封装
    function BodyCtrlReq($http,$scope,index) {
        var url="../t/tjson/json/text.json";
        $http.get(url).success( function(response) {
            $scope.cons = response[index].Name;
        });
    }

    angular.module("app",[]).controller('BodyCtrl',function($scope){
        $scope.tabs = [
            {tab:'关注',cont:''},
            {tab:'推荐',cont:''},
            {tab:'导航',cont:''},
            {tab:'视频',cont:''},
            {tab:'购物',cont:''}
        ];
    }).directive('tab',function($http){
        return {
            restrict: 'E',
            scope:{
//               = 双向数据绑定（tabs可以直接使用和变更父级作用域的tabs，同时）
                tabs:'=',
//               @ 单向数据绑定（父级作用域没有active变量，不需要向父级作用域传递改变量）
                active:'@'
            },
            template:'<div class="tab">'+
            '<ul>'+
            '<li ng-repeat="tab in tabs track by $index" ng-click="changeTab(tab,$index)" ng-class="{active: active == $index }" >{{tab.tab}}</li>'+
            '</ul>'+
            '<div class="content">{{cons}}</div>'+
            '</div>',
            replace: true,
            link:function(scope){
//            调用封装好的请求函数
                BodyCtrlReq($http,scope,scope.active);
//                var rUrl = '../t/tjson/json/text.json';
//                $http.get(rUrl).success(function(response){
//                    console.log(response);
//                    scope.cons = response[scope.active].Name;
//
//                });

//                scope.cons = scope.tabs[scope.active].cont;
                scope.changeTab = function(tab,index){
                    scope.cons = tab.cont;
                    scope.active = index;

//                    $http.get(rUrl).success(function(response){
//                        console.log(response);
//                        scope.cons = response[index].Name;
//
//                    });
                    BodyCtrlReq($http,scope,index);

                };
            }
        }
    });
</script>