AngularJS：一次在数组中显示一个特定对象

Posted 2023-03-05

【中文标题】AngularJS：一次在数组中显示一个特定对象

【英文标题】：AngularJS: Display one specific object in an array at a time

【发布时间】：2015-08-14 05:59:04

【问题描述】：

我想一次只显示这个 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 P***ic)","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.koronap***ice.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>

我想做的只是一次显示一条记录，然后通过单击页面上的某个按钮来更改它。

【参考方案1】：

使用ng-click，您可以在控制器上调用setter 函数将选定的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>

【讨论】：

非常感谢先生。你真的为我节省了几个小时的工作时间；）需要更多地了解 ng-show。再次感谢

【参考方案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];
        ;
    ]);

警告，我无法测试代码。