Question

我的问题是，每当我点击弹出的任何项目时，首先显示的是第一项数据而不是单击的项目数据。请查找代码以供参考：

<div class="quote-inner-section">
                <div class="col-xs-6 col-md-6  quote-wrapper" ng-repeat="appreciate in customerQuotes | filter:search">
                    <div class="quote-wrapper-inner thumbnail" data-toggle="modal" data-target="#myModal" ng-click="modal.selected = clientquote"> 
                        <div class="appreciator-snap">
                            <figure class="appreciator1">
                                <img src="modules/main/img/icon_user.png" class="img-responsive img-circle" width="35">
                            </figure>
                            <div class="pointer"></div>
                            <figure class="appreciator2">
                                <img src="modules/main/img/icon_user.png" class="img-responsive img-circle" width="45">
                            </figure>
                        </div>
                        <div class="tile-content">
                            <div class="keymetric-based">
                                <div class="appreciation-box">
                                    <span class="quote-name" ng-model="writer" ng-bind="appreciate.by"></span>
                                    <span class="arrow-right">&#9658;</span>
                                    <span class="quote-name"  ng-bind="appreciate.to"></span>
                                    <span class="badge quote-date"> 5 days ago</span>
                                </div>
                                <div class="quote-details">
                                    <blockquote class="truncate">
                                      <p>{{appreciate.description}}</p>
                                        <span class = "dotThree">....Read more</span>
                                    </blockquote>
                                </div>
                            </div>                  
                        </div>
                    </div>
                    <div class="modal fade col-md-6 col-sm-6" id="myModal" role="dialog" aria-labelledby="myModalLabel">
                      <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                          </div>
                          <div class="modal-body" >                            
                            <p>Written by <span   ng-model="writer">{{appreciate.by}}</span></p>
                            <p>To <span  >{{appreciate.to}}</span></p>
                            <p>Description:  <span  >{{appreciate.description}}</span>  </p>
                            <p>Date : <span> {{date | date:'yyyy-MM-dd'}}</span></p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                          </div>
                        </div>
                       </div>
                    </div> 
            </div>
            <div class="clearfix"> </div>            
               <nav style="padding-left:15px;">
                  <ul class="pagination">
                    <li>
                      <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                      <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
            </div>

Answer 1

这就是我在模态窗口中打开项目的方式

    $scope.viewItem = function (item) {
    var modalInstance = $modal.open({
        templateUrl: 'viewItem.html',
        controller: 'viewItemInstanceCtrl',
        size: 'lg',
        resolve: {
            item: function() {
                return item;
            }
        }
    });
    modalInstance.result.then(function (editable) {

    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
};

然后在我的html中，当我调用函数

时，我传递了该项

ng-click='viewItem(itemObject)'

我是否正确理解了这个问题？

Answer 2

通过添加{{$ index}}

修复了此问题

更新了我的HTML，如下所示：

随叫随到：data-target =＆＃34; #myModal {{$ index}}＆＃34;

和On model：id =＆＃34; myModal {{$ index}}＆＃34;

使用ng-repeat进行模型打开

2 个答案: