CODEWITHSUNDEEP
jqueryangularjs
Yevgeniy Bagackiy
Yevgeniy Bagackiy

Reputation: 974

Load Jquery tabs dynamically in angularjs

I want to load tabs from an array in angularjs.

$scope.hods =
[
    { leader_id: 1000321, staff_id: 1000321, longname: "Ooi Kok Hong", username: "ANDREW", team_role: "HOD", importance: "1", active:true  },
    { leader_id: 1000321, staff_id: 1000322, longname: "See Chin Joo", username: "CJSEE", team_role: "HOD", importance: "1", active:false }
];

I created a directive for jquery tabs:

angular.module('quartzScoreboard').directive('hboTabs', function() {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs) {
            var jqueryElm = $(elm[0]);
            $(jqueryElm).tabs()
        }
    };
});

And then tried to print it in html:

<div data-hbo-tabs id="tabs">
  <ul>
      <li ng-repeat="hod in hods"><a href="#{{hod.staff_id}}">{{hod.longname}}</a></li>
  </ul>
  <div ng-repeat="hodnm in hods" id="{{hodnm.staff_id}}">
      <p >{{hodnm.username}}</p>
  </div>
</div>

It doesnt seem to work the way I want it. Like here. Is there any way to achieve it?

Here is jsfiddle

Upvotes: 0

Views: 25

Answers (1)

Hanif
Hanif

Reputation: 3795

You code is okay but need apply $timeout as a injector in your directive like following:

var app=angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
$scope.hods =
[
    { leader_id: 1000321, staff_id: 1000321, longname: "Ooi Kok Hong", username: "ANDREW", team_role: "HOD", importance: "1", active:true  },
    { leader_id: 1000321, staff_id: 1000322, longname: "See Chin Joo", username: "CJSEE", team_role: "HOD", importance: "1", active:false }
];
})
.directive('hboTabs', function($timeout) {
    return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
        $timeout(function () {
          var jqueryElm = $(elm[0]);
          $(elm).tabs();
        });
    }
    };
})

Also use only number as a DOM id attribute value is not a good practice. So that's why I little bit changed in your markup part as well. I added a prefix 'a':

<div ng-controller="myCtrl">

 <div data-hbo-tabs id="tabs">
  <ul>
    <li ng-repeat="hod in hods"><a href="#a{{hod.staff_id}}">{{hod.longname}}</a></li>
  </ul>
   <div ng-repeat="hodnm in hods" id="a{{hodnm.staff_id}}">
    <p>{{hodnm.username}}</p>
   </div>
 </div>
</div>

Upvotes: 1

Related Questions