Question

我正在使用AngularJS的ng-repeat显示一个列表...下面是每个列表项的模板;除了在bootstraps模式中使用的{{...}}之外，它都有效。它几乎'按照它应该的方式工作，但是模态中调用的任何{{..}}调用FIRST列表项中的数据而不是单击的列表项...

                              <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>

HELP！

下面是角度控制器

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


                $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'>

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

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

1 个答案: