AngularJS tabs with ng-repeat

Question

I asked this question before and was wondering maybe somebody has had a similar problem and maybe know how to deal with it? My plnkr!

Angular tabs are not working with ng-repeat. It seems that Angular can't put together tab value from click and tab value from ng-show. My code:

<section ng-app="myApp">
<div ng-controller="myCtrl">
    <ul ng-init="tab=1">
        <li ng-repeat="item in data">
          <a href ng-click="tab = item.thingy">{{item.name}}</a>
        </li>
    </ul>
    <div ng-repeat="item in data" ng-show="tab === item.thingy">
        <img ng-src="{{item.img}}" width="50px"><br>
        {{item.year}}</div>
</div>
</section>

var app = angular.module('myApp', []);

app.controller('myCtrl', ['$scope', function($scope) {
  $scope.data = [{
    name: "First",
    title: "oneTitle",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    year: "2013",
    img: "http://static.hdw.eweb4.com/media/wp_400/1/5/42735.jpg",
    thingy: 1
  }, {
    name: "third",
    title: "twoTitle",
    description: "Quisque pulvinar libero sed eros ornare",
    year: "2014",
    img: "http://static.hdw.eweb4.com/media/wp_400/1/1/8519.jpg",
    thingy: 2
  }, {
    name: "Second",
    title: "threeTitle",
    description: "Cras accumsan massa vitae tortor vehicula .",
    year: "2015",
    img: "http://static.hdw.eweb4.com/media/wp_400/1/5/43326.jpg",
    thingy: 3
  }, {
    name: "fourth",
    title: "FourTitle",
    description: "Suspendisse vitae mattis magna.",
    year: "2011",
    img: "http://static.hdw.eweb4.com/media/wp_400/1/5/42413.jpg",
    thingy: 4
   }];
}]);

I don't really know the answer to this but what I can do is recommend using UI-Bootstrap's tabs which work perfectly fine using this type of behaviour — Dan Moldovan
– Dan Moldovan, Commented May 15, 2015 at 8:34
Thanks! Will try. But I can't stand not knowing the reason for this setup not working :) — Kristine
– Kristine, Commented May 15, 2015 at 8:36

Jossef Harush Kadouri · Accepted Answer · 2015-05-15 09:19:27Z

5

There are multiple ways to approach this (one is dcodesmith's great answer).

Use `Controller As` syntax

If you wish to define view-only variables on your view (as you did in your example), use the Controller As syntax.

One of the pros you'll get using this approach is direct access to define and modify variables on the controller's scope. while in your case, the tab variable has been modified on the child scopes of ng-repeat / ng-init

html

<div ng-controller="myCtrl as vm">

    <ul ng-init="vm.tab=1">
        <li ng-repeat="item in vm.data">
          <a href ng-click="vm.tab = item.thingy">{{item.name}}</a>
        </li>
    </ul>

    <div ng-repeat="item in vm.data" ng-show="vm.tab === item.thingy">
        <img ng-src="{{item.img}}" width="50px"><br>
        {{item.year}}</div>
</div>

js

app.controller('myCtrl', ['$scope',
  function($scope) {
    var vm = this;

    vm.data = [{
       name: "First",
       title: "oneTitle",
       description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
       year: "2013",
       img: "http://static.hdw.eweb4.com/media/wp_400/1/5/42735.jpg",
       thingy: 1
     },
     //...
    ];

  }
]);

http://plnkr.co/edit/1q0AVrcqhIZRjFvVSVIP?p=preview

enter image description here

edited May 15, 2015 at 9:19

answered May 15, 2015 at 8:58

Jossef Harush Kadouri

34.6k10 gold badges143 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Virendra Shenvi Velingkar Over a year ago

We dont need following line <div ng-repeat="item in vm.data" ng-show="vm.tab === item.thingy">

Jossef Harush Kadouri Over a year ago

@VirendraShenviVelingkar this provided in the OP example. what you are suggesting is to keep the object itself instead of the index. i agree this is better however, i stay loyal to the OP example :)

Virendra Shenvi Velingkar Over a year ago

:) Yeah you are right, I thought making the code more clean. :p Lets be loyal to the OP example.

Kristine Over a year ago

I love you guys! Seriously!

dcodesmith · Accepted Answer · 2015-05-15 09:00:58Z

3

Firstly, I think you should declare/initialise your $scope.tab in the controller, as well as the function to set the selected tab. Best practise IMO.

NOTE: Adopting this way of doing also helps testing easier.

HTML

    <ul>
        <li ng-repeat="item in data">
          <a href="#" ng-click="setTab(item.thingy)">{{item.name}}</a>
        </li>
    </ul>

JS

$scope.tab = 1;

// for the debugging reason. 
$scope.$watch('tab', function (newTab, oldTab) {
    console.log(newTab, oldTab);
});

$scope.setTab = function (pos) {
  $scope.tab = pos;
}

edited May 15, 2015 at 9:00

answered May 15, 2015 at 8:49

dcodesmith

9,6244 gold badges38 silver badges40 bronze badges

Comments

Virendra Shenvi Velingkar · Accepted Answer · 2015-05-15 09:11:57Z

modifications in script.js:

var app = angular.module('myApp', []);

app.controller('myCtrl', ['$scope', function ($scope) {
    $scope.data = [{
        name: "First",
        title: "oneTitle",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        year: "2013",
        img: "http://static.hdw.eweb4.com/media/wp_400/1/5/42735.jpg",
        thingy: 1
    }, {
        name: "third",
        title: "twoTitle",
        description: "Quisque pulvinar libero sed eros ornare",
        year: "2014",
        img: "http://static.hdw.eweb4.com/media/wp_400/1/1/8519.jpg",
        thingy: 2
    }, {
        name: "Second",
        title: "threeTitle",
        description: "Cras accumsan massa vitae tortor vehicula .",
        year: "2015",
        img: "http://static.hdw.eweb4.com/media/wp_400/1/5/43326.jpg",
        thingy: 3
    }, {
        name: "fourth",
        title: "FourTitle",
        description: "Suspendisse vitae mattis magna.",
        year: "2011",
        img: "http://static.hdw.eweb4.com/media/wp_400/1/5/42413.jpg",
        thingy: 4
    }];

  $scope.details = $scope.data[0];

  $scope.GetDetails = function(obj)
  {
    $scope.details = obj;
  }

}]
);

In HTML:

<div ng-controller="myCtrl">
        <ul ng-init="tab=1">
            <li ng-repeat="item in data">
              <a href ng-click="GetDetails(item);">{{item.name}}</a>
            </li>
        </ul>
        <div>
          {{details.thingy}} <br/>
          {{details.name}}<br/>
          {{details.title}}<br/>
          {{details.description}}<br/>
          {{details.year}}<br/>
          <img ng-src="{{details.img}}" width="50px"><br>
        </div>
</div>

Collectives™ on Stack Overflow

AngularJS tabs with ng-repeat

3 Answers 3

Use `Controller As` syntax

http://plnkr.co/edit/1q0AVrcqhIZRjFvVSVIP?p=preview

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Use Controller As syntax

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Use `Controller As` syntax