我想一次只显示这个 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
,您可以调用 Controller 上的setter 函数将选定的推荐
项存储在变量中
然后使用 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>
关于javascript - AngularJS:一次显示数组中的一个特定对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30562262/