带有 ng-repeat 的 AngularJS 标签 [英] AngularJS tabs with ng-repeat

问题描述

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

Angular 选项卡不适用于 ng-repeat.Angular 似乎无法将来自单击的选项卡值和来自 ng-show 的选项卡值放在一起.我的代码:

<div ng-controller="myCtrl"><ul ng-init="tab=1"><li ng-repeat="数据中的项目"><a href ng-click="tab = item.thingy">{{item.name}}</a><div ng-repeat="数据中的项目" ng-show="tab === item.thingy"><img ng-src="{{item.img}}" width="50px"><br>{{item.year}}

</节>

var app = angular.module('myApp', []);app.controller('myCtrl', ['$scope', function($scope) {$scope.data = [{name: "第一",title: "oneTitle",描述:Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英."，年份:2013"​​，img: "http://static.hdw.eweb4.com/media/wp_400/1/5/42735.jpg",东西:1}, {name: "第三",title: "twoTitle",描述:Quisque pulvinar libero sed eros ornare"，年份:2014"，img: "http://static.hdw.eweb4.com/media/wp_400/1/1/8519.jpg",东西:2}, {name: "第二",title: "threeTitle",描述:Cras accumsan massa vitae tortor vehicula .",年份:2015"，img: "http://static.hdw.eweb4.com/media/wp_400/1/5/43326.jpg",东西:3}, {name: "第四",title: "FourTitle",描述:Suspendisse vitae mattis magna.",年份:2011"，img: "http://static.hdw.eweb4.com/media/wp_400/1/5/42413.jpg",东西:4}];}]);

解决方案

有多种方法可以解决这个问题(一个是 dcodesmith 的好答案).

使用Controller As语法

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

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

的子范围内修改<小时>

html

<ul ng-init="vm.tab=1"><li ng-repeat="vm.data 中的项目"><a href ng-click="vm.tab = item.thingy">{{item.name}}</a><div ng-repeat="vm.data 中的项目" ng-show="vm.tab === item.thingy"><img ng-src="{{item.img}}" width="50px"><br>{{item.year}}

js

app.controller('myCtrl', ['$scope',功能($范围){var vm = 这个；vm.data = [{name: "第一",title: "oneTitle",描述:Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英."，年份:2013"​​，img: "http://static.hdw.eweb4.com/media/wp_400/1/5/42735.jpg",东西:1},//...];}]);

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

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

解决方案

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

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