如何在AngularJS中将对象从ng Repeat传递给Modal

时间:2013-09-17 05:57:40

标签: angularjs angularjs-scope bootstrap-modal

我正在尝试将对象从ngRepeat传递到模态窗口......就像这样:

<div ng-repeat="slot in slots">
    {{ slot }}<br>
    <button ng-click="openModal()">Open</button>
</div>

<script type="text/ng-template" id="myModalContent.html">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title">{{ slot.time }}</h4>
            </div>

            <div class="modal-body">
                <p>body</p>
            </div>

            <div class="modal-footer">
                footer
            </div>

        </div>

    </div>

</script>

在控制器中:

$scope.openModal = function () {
    $modal.open({
        templateUrl: 'myModalContent.html'
    })
}

将插槽传递给模态的正确方法是什么,而不会弄乱范围并导致时髦的行为?我尝试通过<button ng-click="openModal(slot)">...中的那个插槽,哪种工作但奇怪的事情开始发生,这让我相信这不是正确的事情。有什么建议吗?

1 个答案:

答案 0 :(得分:0)

只需传入您为对象数组提供标识符的名称。

例如,对于以下对象数组:

$scope.myArray = [
    {name:"Tyler", job:"Developer"},
    {name:"Tony", job:"Designer"},
    {name:"Tabby", job:"PM"},
    {name:"Todd", job:"Grunt"}
]

像这样访问它们:

<div ng-repeat="person in myArray">
    <div ng-click="openModal(person)">Push me</div>
</div>

然后你可以访问你的myFunction函数:

$scope.openModal = function(person) { console.log(person) };