如何在 ng-repeat 和 angular ui 模态中的模态数据之间进行分页

Question

Angular JS 的新手，有一个非常普通的问题。我有一个 ng-repeat，它通过本地 JSON 文件填充一些数据，单击时会显示有关指定公司的一些更详细信息。我现在想做的是让用户能够使用屏幕上的箭头或键盘箭头（就像大多数照片框一样）在每个公司之间“分页”。

这是我的 HTML 代码：

<div id="portfolio" class="showcase-list stripe" ng-controller="portfolio" id="stripe-showcase">
<div class="contain">
    <h3>Our Companies</h3>
    <a ng-repeat="co in companies" href="#{{co.name}}" class="showcase" ng-click="open(co)">
        <div class="image" id="{{co.name}}">
            <span class="helper"></span>
                <img class="displayed" src="{{co.logo}}">
            <div class="caption">

            </div>
        </div>
        <!--MODAL WINDOW-->
        <script type="text/ng-template" id="myModalContent.html">
            <div class="modal-header">
                <img class="displayed lightbox" src="{{co.logo}}">
            </div>
            <div class="modal-body">
                {{ co.investor_description }}
            </div>
            <div class="modal-footer">

            </div>
        </script>
    </a>
    <div id="{{co.name}}" class="flipbox-dialog"><p>{{co.investor_description}}</p></div>
</div>

还有我的 JS：

var app = angular.module('app', ['ui.bootstrap']);

app.controller('ModalInstanceCtrl', function($scope, $modalInstance, co) {
    console.log("that");
    $scope.co = co;
});

app.controller('portfolio', function($scope, $timeout, $modal) {

$scope.companies = [{
    "investor_description": "Apportable\u2019s platform allows iOS applications to run on Android devices automatically, without requiring extensive changes to the original Objective-C or C++ code.",
    "name": "Apportable",
    "logo": "http://api-images.crunchbase.com/assets/images/resized/0018/5576/185576v7-max-450x450.png",
    "url": "http://www.apportable.com/",
    "linkedin_url": null,
    "crunchbase_url": "http://www.crunchbase.com/company/apportable",
    "angellist_url": "https://angel.co/apportable",
    "twitter_url": "http://twitter.com/apportable"
}, {
    "investor_description": "Your Personalized English-Speaking School\r\n\r\nSpeed towards English fluency with 24/7 online conversation classes and 1-on-1 SpeakAssist study program",
    "name": "Colingo",
    "logo": "http://www.m.com/wp-content/uploads/2012/04/colingo_logo.png",
    "url": "http://www.colingo.com",
    "linkedin_url": "",
    "crunchbase_url": "http://www.crunchbase.com/company/colingo",
    "angellist_url": "https://angel.co/colingo",
    "twitter_url": "https://twitter.com/colingo"
}, {
    "investor_description": "DataTorrent Inc builds technology that enables next generation, real-time big data applications on Hadoop.",
    "name": "DataTorrent",
    "logo": "http://www.m.com/wp-content/uploads/2013/08/Datatorrent-logo.png",
    "url": "http://www.datatorrent.com",
    "linkedin_url": "http://www.linkedin.com/company/malhar-inc-",
    "crunchbase_url": "http://www.crunchbase.com/company/datatorrent",
    "angellist_url": "https://angel.co/datatorrent",
    "twitter_url": "http://twitter.com/datatorrent"
}];

$scope.open = function (_co) {
    console.log("this");
    var modalInstance = $modal.open(
        {
            controller: "ModalInstanceCtrl",
            templateUrl: 'myModalContent.html',
            resolve: {
                co: function () {
                    return _co;
                }
            }
        });
};
});

不太确定从哪里开始......有人可以指出我正确的方向吗？我将非常感激！

Answer 1

也许可以尝试将 JS 中的“上一个”和“下一个”按钮和值指定为简单链接...

和/或在 myModalContent.html 中创建“上一个”和“下一个”按钮

希望这会有所帮助。