Question

im building的测试应用程序有2个数据列表。

1) books 
2) borrower details

我列出了所有可用的书籍，如果已经借阅，我会用借来的状态显示他们的名字

我想要实现的是，

当我列出所有书籍时，用户将能够点击并显示引导模式。现在它显示了书的详细信息。但如果借书，我需要向借款人展示姓名，身份证号码等详细信息以及书籍详情。

这就是我试过的

HTML

<div class="available" ng-repeat="book in books" ng-click="popup(book)">
    {{book.book_name}}
    <div ng-repeat="borrower in borrowers">
        <div class="not_available" ng-show="borrower.book_id==book.book_id>
          {{book.book_name}} is already borrowed by {{borrower.name}}
        </div>
   </div>

的JavaScript

function libcontroller($scope, $modalInstance, book)
{
    $scope.book = book;
}

function testcontroller($scope, $timeout, $modal, $log) {
    $scope.books = []; // custom to pull books from the database
    $scope.borrowers = []; // custom to pull books from the database
    // MODAL WINDOW
    $scope.popup = function(_book) {
        var modalInstance = $modal.open({
            controller: "libcontroller",
            templateUrl: 'myContent.html',
            resolve: {
                book: function()
                {
                    return _book;
                }
            }
        });
    };
}

如何实现这一目标？

谢谢

Answer 1

由于您已在$scope.borrowers中获得了借款人信息，因此可以使用Array.prototype.filter()

获取他的信息

resolve: {
    book: function () {
        return _book;
    },
    borrowers: function () {
        return $scope.borrowers.filter(function (br) {
            return br.book_id == _book.book_id
        })
    }
}

libcontroller

function libcontroller($scope, $modalInstance, book, borrowers){
    $scope.book = book;
    $scope.borrowers = borrowers;
}

Answer 2

您可以通过db或其他逻辑找到 _book 的借用者，并将其写在resolve中，就像book一样。所以代码变成了：

$scope.popup = function(_book) {
        var _borrower = YOUR LOGIC TO GET BORROWER FOR BOOK
        var modalInstance = $modal.open({
            controller: "libcontroller",
            templateUrl: 'myContent.html',
            resolve: {
                book: function()
                {
                    return _book;
                },
                borrowers: function(){
                    return _borrower
                }
            }
        });
    };

现在，您可以通过book和borrowers注释libscontroller轻松地使用book和_borrowers：

function libcontroller($scope, $modalInstance, book, borrowers)
{
    $scope.book = book;
    $scope.borrowers = borrowers;
}

在ng-click上将值传递给模态窗口

2 个答案: