按钮点击无法打开模态

时间:2018-02-09 09:19:29

标签: javascript angular-ui-bootstrap

我想使用modal来表示我的表行contennt上的其他数据因为这个原因我使用下面的代码,但是当我按下按钮模态时不会弹出,我也没有看到任何错误我的浏览器控制台,我应该添加什么来使我的代码工作?:

    <script  cam-script type="text/form-script">
$scope.myFunc = function() {
      $('#myModal').modal('show');
    };
</script>
<h2>My job List</h2>                                                                                            
    <div>
        <table style="width:100%;"  class="table table-hover" >
            <thead>
                <tr>
                    <th style="width:80px; height:px;">chose</th>
                    <th style="width:140px;">id</th>
                    <th style="width:305px;">organizationNameEN</th>
                    <th style="width:250px;">cardNumber</th>
                    <th style="width:250px;"></th>
                    <th style="width:250px;"></th>

                </tr>           
            </thead>
            <tbody ng-repeat="item in arr" >
                <tr>
                    <td><input style="width:25px; height:25px;" type="checkbox" ng-model="chekselct"                                                     
                                                                cam-variable-name="isItemSelected"                                                  
                                                                cam-variable-type="Boolean" /></td> 
                    <td><input style="width:140px;" type="text" id="id" ng-model="item.id" readonly /></td>
                    <td><input style="width:305px;" type="text" id="organizationNameEN"  ng-model="item.organizationNameEN" /></td>
<td><input style="width:305px;" type="text" id="organizationNameGE"   ng-model="item.organizationNameGE" /></td>                     
                    <td><button type="button" class="btn btn-primary" style="height:30px" data-toggle="modal" data-target="#myModal">details</button></td>
                     <td><button ng-click="myFunc()" role="button" class="btn btn-large btn-primary">Detail</button></td>
                     <div class="modal fade" id="myModal" role="dialog">
       <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content" ng-repeat="item in arr">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Details</h4>
        </div>
        <div class="modal-body">
          <p ><label for="organizationNameEN"> organizationNameEN</label> :  <input style="width:305px;" type="text" id="organizationNameEN"  ng-model="item.organizationNameEN" /></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>               
                </tr>
            </tbody>
        </table>
    </div>

2 个答案:

答案 0 :(得分:0)

在您的按钮(具有ng-click =“myFunc()”的按钮)上尝试此操作,它会调用模态而无需显式脚本。

<button role="button" class="btn btn-large btn-primary" data-toggle="modal" data-target="#myModal">Detail</button>

答案 1 :(得分:0)

您可以不使用角度打开它。将代码ng-click="myFunc()"替换为data-toggle="modal" data-target="#myModal" ...它应该可以正常工作