AngularJS：显示一个特定对象在数组中，一时间

Question

我想在AA时间从这个JSON数组只显示一个特定对象：

{"records":[ 
    {"Name":"Pogrom wichra - Ole\u015bnica ","Desc":"Dystans: ok 7km (bieg w stylu poligonu s\u0142u\u017cb specjalnych Polski) Trasa: woda, b\u0142oto, trz\u0119sawisko, g\u0119ste zaro\u015bla, przeszkody naturalne i sztuczne http:www.pogromwichra.pl","Image":"9833.jpg"}, 
    {"Name":"Bieg herosa ? Pustynia B\u0142\u0119dowska","Desc":"Dystans: opcja do wybrania 9 km, 10kmp\u0142aski lub z przeszkodami, bieg 3 i 9 godzinny Trasa: piasek, piasek, piasek, wzniesienia, przeszkody naturalne i sztuczne www.biegherosa.pl","Image":"6273.jpg"}, 
    {"Name":"Dycha na 5 ? Pi\u0105tkowice (ko\u0142o Pabianic)","Desc":"Dystans: 10km z niespodziank\u0105 Trasa: nawierzchnia utwardzona ok. 5%, drogi i \u015bcie\u017cki gruntowe 95%. Na trasie do pokonania tor motokrosowy z ostrymi podbiegami i zbiegami po nier\u00f3wnym pod\u0142o\u017cu. Obcinek bardzo trudny technicznie. www.koronapabianice.pl ","Image":"5383.jpg"}, 
    {"Name":"Bieg rze\u017aniczka (ma\u0142y rze\u017anik) ? Cisna (Bieszczady)","Desc":"Dystans: ok. 27km Trasa: do\u015b\u0107 trudna trasa g\u00f3rska, chocia\u017c przepi\u0119kna i malownicza www.biegrzeznika.pl\/rzezniczek\/","Image":"4640.jpg"}, 
    {"Name":"Runmageddon ? wiele miast w Polsce","Desc":"Dystans: 6, 12, 21km Trasa: woda, b\u0142oto, ogie\u0144, bagno, przeszkody linowe, sko\u015bne i pionowe \u015bciany, zasieki, okopy www.runmageddon.pl","Image":"7378.jpg"},{"Name":"GROM CHALLENDE - SI\u0141A I HONOR - O\u015brodek Szkolenia Poligonowego GROM Gr","Desc":"Dystans: 20km Trasa: mega wyczerpuj\u0105ca, jest tam wszystko o czym by\u015b pomy\u015bla\u0142 ?. Start tylko zespo\u0142owy (2-osobowy), limit czasowy 5 godzin","Image":"8815.jpg"}, 
    {"Name":"Biegowa bitwa o \u0141\u00f3d\u017a - \u0141\u00f3d\u017a ","Desc":"Dystans: ok.13km Trasa: woda, b\u0142oto, trz\u0119sawisko, g\u0119ste zaro\u015bla, przeszkody naturalne i sztuczne facebook.com\/bitwaolodz","Image":"7019.jpg"}, 
    {"Name":"Bieg po wygas\u0142ych wulkanach -Z\u0142otoryja","Desc":"Dystans: 13-14km Trasa: Trasa ekstremalna w terenie zalesionym, b\u0142oto, rowy melioracyjne, trz\u0119sawisko, dno jeziora, przeszkody sztuczne i naturalne, strome podbiegi. www.biegwulkanow.pl","Image":"8465.jpg"} 
]} 

在我的JavaScript文件，我只是把对象的范围。

$http.get("link/to/my/json/file").success(function (response) { 
    $scope.recommends = response.records; 
}); 

最后，我的HTML看起来或多或少是这样的：

<article class="animate-switch" ng-switch-when="polecanybieg"> 
    <div ng-repeat="recomended in recommends"> 
     <h1>{{recomended.Name}}</h1><hr> 
     <img class="recomendedrunimg" ng-src="../run/{{recomended.Image}}"><br><br> 
     <p>{{recomended.Desc}}</p> 
    </div> 
</article> 

所有我想要做的是显示在单一时间记录，然后通过点击的一些按钮来更改它页。使用ng-click

Answer 1

，可以调用控制器上的设定器功能到所选recomended项存储在一个变量

然后使用ng-show决定是否应该显示的附加数据（仅在当前recomended对象等于所选一个）

http://jsfiddle.net/kcbxg14p/1/

JS

angular.module('app', []) 
    .controller('TodoCtrl', function ($scope) { 

    $scope.setSelectedItem = function (item) { 
     $scope.selectedItem = item; 
    }; 

    $scope.recommends = [{ 
     "Name": "Pogrom wichra - Ole\u015bnica ", 
      "Desc": "Dystans: ok 7km (bieg w stylu poligonu s\u0142u\u017cb specjalnych Polski) Trasa: woda, b\u0142oto, trz\u0119sawisko, g\u0119ste zaro\u015bla, przeszkody naturalne i sztuczne http:www.pogromwichra.pl", 
      "Image": "9833.jpg" 
    }, 
    ... 
    ]; 

}); 

HTML

<div ng-app="app"> 
    <div class="container" ng-controller="TodoCtrl"> 
     <div ng-repeat="recomended in recommends"> 
     <a class="btn btn-primary" ng-click="setSelectedItem(recomended)"> Click to view {{recomended.Name}} </a> 

      <div class="well" ng-show="selectedItem == recomended"> 
       <h1>{{recomended.Name}}</h1> 

       <hr> 
       <img class="recomendedrunimg" ng-src="../run/{{recomended.Image}}"> 
       <br> 
       <br> 
       <p>{{recomended.Desc}}</p> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

如果你想只有一个recommend一次显示了，为什么循环？

遵循Angular哲学，您应该声明什么显示在页面中。在这种情况下，

<span>{{recommend}}</span> 

其中[[Controller]].recommend是一个暴露于相对控制器的变量，应该足够了。

离开了取部分，假定[[Controller]].records已经是对象的列表，然后

<div ng-controller="MainCtrl as Ctrl"> 
    <span>{{Ctrl.recommend}}<span> - <span ng-click="Ctrl.setNextRecord()">&gt;</span> 
</div> 

和

angular.module(<your module name here>) 
    .controller("MainCtrl", [function() { 
     var self = this; 
     self.records = [ ... ]; 
     self.recommend = records[0]; 
     self.currentIndex = 0; 
     self.setNextRecord = function() { 
      var nextIndex = currentIndex < self.currentIndex - 2 ? currentIndex + 1 : 0; 
      self.currentIndex = nextIndex; 
      return self.recommend = records[self.currentIndex]; 
     }; 
    }]); 

警告，我无法测试的代码。