AngularJS标签怪怪的

问题描述

我在想，如果你们中的一些可以减轻我，试图解释什么，我在这个小姐的

I was wondering if some of you could lighten me and try to explain what I miss in this : http://plnkr.co/edit/opxB2Jfi0Xf0Tq1780vz?p=preview

看起来很简单，我，但不起作用。
我的code：

Looks quite simple to me but does not work.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>

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

}
]);


</script>

感谢你在前进！

推荐答案

在的script.js修改：

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

}]
);

在HTML：

<section ng-app="myApp">
<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>
</section>

第二基本上不需要NG-重复

Basically second ng-repeat is not required

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