javascript - Angular JS 在 ng-repeat 列表中使用模态

Question

我正在使用 AngularJS 的 ng-repeat 显示列表...下面是每个列表项的模板；除了引导模式内部使用的 {{...}} 之外，一切都有效。它“几乎”按照应有的方式工作，但是模式中调用的任何 {{..}} 都会调用来自第一个列表项的数据，而不是单击的列表项...

                              <ul>
                                <li ng-repeat="faIcon in faIcons | filter:search" class="col-md-4 col-sm-6 col-lg-3 anIcon">

                                  <a data-toggle="modal" href='#icon-select'>
                                    <i class="fa fa-fw">{{faIcon.theIcon}}</i> <!-- THESE WORK -->
                                    {{faIcon.name}}
                                    <span class="muted">{{faIcon.code}}</span>

                                    <a href="#" class="btn-remove" data-toggle="tooltip" ng-click="remove($index)" data-original-title="Remove From List"> X </a>
                                  </a>





                                  <div class="modal fade" id="icon-select">
                                    <div class="modal-dialog">
                                      <div class="modal-content">

                                        <div class="modal-header">
                                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                          <h4 class="modal-title">{{faIcon.name}}</h4> <!-- These will load the name of the first list itme only -->
                                        </div>

                                        <div class="modal-body">
                                          <h1><i class="fa fa-fw">{{faIcon.theIcon}}</i></h1>
                                        </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><!-- /.modal-content -->
                                    </div><!-- /.modal-dialog -->
                                  </div><!-- /.modal -->

                                </li>
                              </ul>

救命!

下面是 Angular Controller

              var faList = function ($scope){
                $scope.faIcons = [
                    {theIcon: "", name: "fa-adn", code: "[]"},
                    {theIcon: "", name: "fa-youtube", code: "[]"},
                    {theIcon: "", name: "fa-youtube-play", code: "[]"},
                    {theIcon: "", name: "fa-youtube-square", code: "[]"}
                  ];


                $scope.add = function (){
                  $scope.faIcons.push({
                    theIcon: $scope.new_icon,
                    name: $scope.new_name,
                    code: $scope.new_code,
                  });
                    $scope.new_icon = "";
                    $scope.new_name = "";
                    $scope.new_code = "";
                };

                $scope.remove = function(index){
                  $scope.faIcons.splice(index,1);
                };
              };

Answer 1

您创建的所有模态框都具有相同的 ID，因此

<a data-toggle="modal" href='#icon-select'>

打开创建的第一个模态框。考虑将模态移到循环之外。