带有ng-repeat的AngularJS选项卡 [英] AngularJS tabs with ng-repeat

问题描述

我之前问过这个问题 ，我想知道也许有人遇到过类似的问题，也许知道如何处理吗?我的 plnkr ！

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选项卡不适用于ng-repeat.看来Angular不能将click的制表符值和ng-show的制表符值放在一起. 我的代码:

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
   }];
}]);

推荐答案

有多种解决方法(一种是dcodesmith的不错的答案).

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

如果您希望在视图中定义仅视图变量(就像在示例中一样 )， 使用 Controller As 语法 .

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

使用这种方法的优点之一是可以直接访问在控制器范围内定义和修改变量.而在您的情况下，tab变量已在ng-repeat/ng-init

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=预览

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

这篇关于带有ng-repeat的AngularJS选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！