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

来源：互联网发布：js中字符串转json 编辑：程序博客网时间：2024/06/14 08:13

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>

整体就是这样了！

0 0