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

Question

有一个工作 jsfiddle that shows table + modal by using AngularJS + AngularStrap (please see external resources in jsFiddle or take a look here for angular-strap modals http://mgcrea.github.io/angular-strap/#/modals)

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

此外，问题是 table 的行可以按任何列 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
        }
    ];

});

谢谢。

Answer 1

你可以这样做：

将 ng-click 更改为：

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 = {..} 定义。

Fiddle

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

AngularJS + Angular Strap - How to add dynamic content to modals depending on button clicked?

html

javascript

angularjs

angularjs-directive

twitter-bootstrap-3