Question

我有从$ http调用返回的对象，作为JSON。 HTML在哪里是项目：

<ul>
<li>
<a data-target="#ModalNPPInfo0" data-toggle="modal" class="col-xs-9 mt13" href="#">                 
        <p class="meta-list-text"> {{ object.name }} </p>
     </a>
</li>
</ul>

我需要显示对象数据的HTML：

 <dl class="dl-horizontal left-align mt10 mb15">
                                <dt>Name</dt>
                                <dd>{{ object.name }}</dd>
                                <dt>Sequence</dt>
                                <dd>{{ object.sequenceNumber }}</dd>
                                <dt>Start</dt>
                                <dd>{{ object.beginDate | date:'dd.MM.yyyy.' }}</dd>

 </dl>

因此，当单击列表中的项目时，它应该打开窗口（＃ModalNPPInfo0），其中包含在列表中选择的object.name。如何告诉Angular我选择（点击）该object.name？

感谢。

Answer 1

您可以使用ngClick directive：

<强> HTML：

<div ng-app="myApp">
    <div ng-controller="MyController">
        <ul>
            <li ng-click="openModal(object)">
<a data-target="#ModalNPPInfo0" data-toggle="modal" class="col-xs-9 mt13">                 
        <p class="meta-list-text"> {{ object.name }} </p>
     </a>

            </li>
        </ul>
        <div class="modal fade" id="ModalNPPInfo0" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                        </button>
                         <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <dl class="dl-horizontal left-align mt10 mb15"> <dt>Name</dt>

                            <dd>{{ selectedObject.name }}</dd> <dt>Sequence</dt>

                            <dd>{{ selectedObject.sequenceNumber }}</dd> <dt>Start</dt>

                            <dd>{{ selectedObject.beginDate | date:'dd.MM.yyyy.' }}</dd>
                        </dl>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

然后在控制器中创建openModal函数，打开你的模态。

<强>的javascript：

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

function MyController($scope) {
    $scope.object = {
        name: "John",
        sequenceNumber: "123",
        beginDate: "12/12/2014"
    }

    $scope.selectedObject = {};

    $scope.openModal = function (object) {
        $scope.selectedObject = object;
    }
}

<强> jsFiddle example

如何用Angular选择HTML中的列表项？

1 个答案: