-2

I want to bind data on click of tab and need to show that in a common div for all tabs . example

<ul><li>Tab1</li><li>Tab2</li><li>Tab3</li></ul>

<div id=tabsdata>data will bind here using angular js templates</div>

So according to this scenario how I can handle it in angular js?? Data that will come in tabsdata is dynamic data. For ezample in tab1 I want to save user info. In tab2 I want to show users list like this..

Dalvir Saini
  • 380
  • 2
  • 11
  • 30

1 Answers1

1

Forget about jQuery / JavaScript syntax and logic. AngularJS has everything you need. I think you need to render them with ng-repeat. This will allow you to add them dynamically. After that it's enough to add ng-click to bind a click event and do what you want to them.

Here is a demo, where you can select them on click:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
  $scope.tabsdata = ["Tab1", "Tab2", "Tab3"];
  $scope.select = function(tab) {
    $scope.selected = tab;
  }
  $scope.add = function() {
    $scope.tabsdata.push("Tab" + ($scope.tabsdata.length + 1));
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="customersCtrl">
  - Click on tabs to select them -
  <ul>
    <li ng-repeat="tab in tabsdata" ng-click="select(tab)">{{tab}}</li>
  </ul>
  <button ng-click="add()">+</button>
  <br>
  <div>{{selected}}</div>
</div>
Aleksey Solovey
  • 4,153
  • 3
  • 15
  • 34
  • yes its fine. now I want that click on li means on tabs then another template will call and I aill bind that with some data. For example First tab is "Users" now I want to show result div data like this Name email Address and on tab2 click I want to show like Name email – Dalvir Saini Feb 19 '18 at 11:50
  • @DalvirSaini what routing do you have? `ngRoute` or `ui.router`? – Aleksey Solovey Feb 19 '18 at 11:55
  • I am using directives like var atkApp = angular.module("ATKApp", []); atkApp.config(function ($locationProvider) { $locationProvider.html5Mode(true).hashPrefix('!'); }); var controllers = {}; atkApp.controller(controllers); atkApp.directive('ngDashboardDetails', function ($window, $document) { – Dalvir Saini Feb 19 '18 at 12:08
  • @DalvirSaini that's a very inefficient way of redirecting from one tab to another. Your directive needs to implement `transclude` routing, which would load a specific `templateUrl` content for each tab. OR you can simply work with `ui.router` and automate it all with [``](https://angular-ui.github.io/bootstrap/#!#tabs) – Aleksey Solovey Feb 19 '18 at 12:24