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

im建立了2个数据列表的测试应用程序。在ng-click上将值传递给模态窗口

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; 
       } 
      } 
     }); 
    }; 
}

如何才能实现这一目标？

谢谢

来源

2017-01-12 Learner

什么不起作用？ – devqon

正如你已经在$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; 
}

来源

2017-01-12 11:45:43 Satpal

谢谢...完美的作品 – Learner

一个小问题..我不能单独访问值...当我键入'{{borrowers}}'它显示所有的值..但是当我尝试访问单独的行'借款人。名字'它永远是空的 – Learner

@学习者，这里'borrowers'是一个数组。尝试'借款人[0] .name' – Satpal

是牵强您可以找到借款人为您的通过db或其他逻辑，并将其写入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 
       } 
      } 
     }); 
    };

现在你可以在libscontroller通过注入book和_borrowers为使用book和borrowers容易：

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

来源

2017-01-12 11:55:25

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

回答

相关问题