在角应用程序中将值传递给bootstrap模式弹出窗口

时间:2015-07-13 10:08:09

标签: javascript jquery angularjs twitter-bootstrap bootstrap-modal

我在span& amp;的帮助下创建了一些标签。 NG-重复。当用户点击任何标签上的删除按钮时,我打开一个模态弹出窗口。这个modal-pop有一个删除按钮。此删除按钮依次调用一个函数。

我想将一些信息传递给此删除功能,但我不知道如何将删除按钮的ID传递给出现的模式弹出窗口。

以下是fiddle

<div ng-app>
    <div ng-controller="TodoCtrl">
        <div ng-app="" ng-init="names=['One','Two','Three']">
            <ul>
                <li ng-repeat="x in names"> <span class="tag label label-info">
  <span>{{x}}</span>
 <a data-toggle="modal" data-target="#confirm-delete"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a> 
                    </span>
                </li>
            </ul>
        </div>
        <div class="modal fade" id="confirm-delete" 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" aria-hidden="true">&times;</button>
                         <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>

                    </div>
                    <div class="modal-body">
                        <p>You are about to delete one track, this procedure is irreversible.</p>
                        <p>Do you want to proceed?</p>
                        <p class="debug-url"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <a ng-click="deleteMe()" class="btn btn-danger btn-ok" data-dismiss="modal">Delete</a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:3)

添加ng-click可以解决您的问题。但这种方法将在这里进行一些调整。

a标记中添加ng-click。

  <a data-toggle="modal" ng-click="setID(x)" data-target="#confirm-delete">
      <i class="remove glyphicon glyphicon-remove-sign glyphicon-white">
      </i>
   </a> 

然后添加一个临时变量来保存要删除的值(在你的情况下为x)

  $scope.setID = function(x) {
      $scope.valueToBeRemoved = x;
  };

现在您可以在delete方法中访问该变量。

更新了plunker here