AngularJS 个带有 ng-repeat 的标签

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 无法将来自点击的制表符值和来自 ng-show 的制表符值放在一起。我的代码：

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

Answer 1

首先，我认为您应该 declare/initialise 控制器中的 $scope.tab 以及设置所选选项卡的功能。 IMO 最佳实践。

注意：采用这种方式也有助于更轻松地进行测试。

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

Answer 2

有多种方法可以解决这个问题（一种是 dcodesmith 的出色回答）。

使用`Controller As`语法

如果您希望在您的视图中定义仅查看变量（就像您在示例中所做的那样）， 使用 Controller As 语法。

使用此方法的优点之一是直接访问控制器范围定义和修改变量。而在您的情况下，tab 变量已在 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

Answer 3

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

}]
);

在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>

AngularJS 个带有 ng-repeat 的标签

AngularJS tabs with ng-repeat

tabs

angularjs

ng-repeat

使用`Controller As`语法

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

AngularJS 个带有 ng-repeat 的标签

AngularJS tabs with ng-repeat

tabs

angularjs

ng-repeat

使用Controller As语法

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

使用`Controller As`语法