AngularJS + Angular Strap-如何根据单击的按钮向模态添加动态内容？

哈拉季涅尼奇

有一个工作的jsfiddle通过使用AngularJS + AngularStrap显示表+模态（请参阅jsFiddle中的外部资源，或在这里查看angular-strap模态http://mgcrea.github.io/angular-strap/#/modals）

我的问题是：如何为按钮添加更多动态效果？它们显示静态内容，对吗？我需要它来显示与单击按钮完全相同的原始内容的第一列（名字）的内容。最好的方法是什么？

另外，问题在于表的行可以按任何列asc或desc排序，所以我认为我不能使用id属性。

有任何想法吗？

这是代码：HTML代码：

<div  ng-controller="ModalDemoCtrl">
    <table>
        <tr ng-repeat="person in persons">
            <td>{{ person.firstName }}</td>
            <td>{{ person.lastName }}</td>
            <td>{{ person.age }}</td>
            <td>
                <a href="#" class="btn btn-default" ng-click="open()" bs-modal="modal"><i class="glyphicon glyphicon-pencil"></i></a>
            </td>
        </tr>
    </table>
</div>

js代码：

'use strict';

var app = angular.module('myApp', ['mgcrea.ngStrap']);


app.controller('ModalDemoCtrl', function($scope) {
$scope.modal = {
  "title": "only one name of Manuela or Mark or Jane should be displayed here",
  "content": "only one name of Manuela or Mark or Jane should be displayed here"
};

    $scope.persons = [
        {
            "firstName": "Manuela",
            "lastName": "Smith",
            "age": 44
        },
        {
            "firstName": "Mark",
            "lastName": "Johnson",
            "age": 25
        },
        {
            "firstName": "Jane",
            "lastName": "Doe",
            "age": 33
        }
    ];

});

谢谢你。

奥姆里·阿哈隆（Omri Aharon）

您可以这样做：

将点击更改为：

ng-click="openModal(person)"

注入$modal控制器并定义一个新功能：

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

    $scope.openModal = function (person) {
        $modal({title: person.firstName, content: person.lastName, show: true});
    }

...

}

注意，您需要删除bs-modal="modal"和$scope.modal = {..}定义。

小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。