ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript-将值传递给angular应用程序中的引导模式弹出窗口

2019-11-20 02:34:59  阅读:259  来源: 互联网

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


我在span&的帮助下创建了一些标签. ng-repeat.当用户单击任何标签上的“删除”按钮时,我会打开一个模式弹出窗口.此模式弹出窗口具有删除按钮.该删除按钮又调用一个功能.

我想将一些信息传递给该删除功能,但是我不确定如何将删除按钮的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>

解决方法:

添加ng-click将解决您的问题.但是这里将对方法进行一些调整.

将ng-click添加到a标签.

  <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方法中访问该变量.

更新了塞子here

标签:bootstrap-modal,angularjs,twitter-bootstrap,javascript,jquery
来源: https://codeday.me/bug/20191120/2040751.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有