Как получить указанную c JSON запись с помощью AngularJS - PullRequest
Новая
       21

Как получить указанную c JSON запись с помощью AngularJS

0 голосов
/ 23 апреля 2020

Вот изображение текущего вывода: выходное изображение

Я пытаюсь, чтобы оно показывало активный заголовок, когда вы нажимаете «загрузить», а не каждую запись. Я также пытаюсь, чтобы он отображал имя загружаемого файла (ов) вместо текста c или URL.

Код JS, который загружает заголовки: 

(function($){
    var titledbApp = angular.module('dsshop', ['angular-loading-bar'])
                            .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
                              cfpLoadingBarProvider.includeSpinner = false;
                              cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
                            }]);

    titledbApp.controller('TitleListController', function TitleListController($scope, $http) {
        $http.get('https://nitrobrew.github.io/BrewShopNitro/list0.json').then(function(response){
            $scope.titles = response.data.sort(function(a, b){
              if(a.name.toUpperCase() < b.name.toUpperCase()) return -1;
              if(a.name.toUpperCase() > b.name.toUpperCase()) return 1;
              return 0;
            });
        });
    });

    //Filesize filter, credit to https://gist.github.com/yrezgui/5653591
    titledbApp.filter( 'filesize', function () {
        var units = [
            'bytes',
            'KB',
            'MB',
            'GB',
            'TB',
            'PB'
        ];

        return function( bytes, precision ) {
            if ( isNaN( parseFloat( bytes )) || ! isFinite( bytes ) ) {
              return '?';
            }

            var unit = 0;

            while ( bytes >= 1024 ) {
              bytes /= 1024;
              unit ++;
            }

            return bytes.toFixed( + precision ) + ' ' + units[ unit ];
        };
    });
})();

Код HTML, который загружает модальное поле (bootstrap модальный): 

<div class="modal fade" id="downloadModal" tabindex="-1" role="dialog" aria-labelledby="downloadModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel" ng-repeat="title in titles">
                    <center>{{title.name}} download menu</center>
                </h4>
            </div>
            <div class="modal-body">
                <a ng-href="{{title.files[0].url}}" title="{{title.files[0].url}}"
                    ng-repeat="title in titles">File 1</a>
                <br>
                <a href="{{title.files[1]}}">{{title.files[1]}}</a>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-blue" data-dismiss="modal"
                    data-toggle="tooltip">Cancel</button>
            </div>
        </div>
    </div>
</div>

Любая помощь очень ценится!

1 Ответ

0 голосов
/ 23 апреля 2020

Создайте data объект со свойством selected в вашем контроллере, который будет содержать выбранный title объект: 

$scope.data = {
  selected: null
};

Установите data.selected при нажатии на заголовок: 

<h4 ng-repeat="title in titles" ng-click="data.selected = title">
    <center>{{title.name}} download menu</center>
</h4>

Показать область файлов и соответствующие файлы, если заголовок selected: 

<div class="modal-body" ng-if="data.selected">
    <div ng-repeat="file in data.selected.files">
        File {{ $index + 1 }} <a ng-href="{{ file.url }}">{{ file.name }}</a>
    </div>
</div>

(я удалил некоторые CSS классы и т. Д. c, чтобы прояснить их.)

Вот демо

...