无法使用Angular.js/Jquery动态打开模态窗口

我遇到问题。我试图用Angular.js和Jquery动态地打开一个弹出窗口，但是它没有打开。我在下面解释我的代码。无法使用Angular.js/Jquery动态打开模态窗口

<input type='button' class='btn btn-xs btn-green' value='View' data-toggle="modal" data-target="#" ng-click="viewSearchDetails(133);"> 
<div class="modal fade" id="viewdetailssec" tabindex="-1" role="dialog" aria-labelledby="viewexamplelabel" aria-hidden="true" ng-repeat="ind in indUserDetails" ng-if="indUserDetails.length >0"> 
<div class="modal-dialog fyndspacemodalsec" role="document"> 
<div class="modal-content"> 
<div class="modal-header"> 
<h5 class="modal-title pull-left" id="viewexamplelabel">View Details</h5> 
</div> 
</div> 
</div> 
</div>

我的控制器端代码如下。

$scope.viewSearchDetails=function(userid){ 
    $scope.indUserDetails=[]; 
    angular.forEach($scope.allUserInfo,function(obj){ 
     if(obj.user_id==userid){ 
     $scope.indUserDetails=obj; 
     $("#viewdetailssec").modal(); 
     } 
    }) 
    }

在这里，我需要打开弹出窗口，而如果语句将执行，但它根本不打开。请帮我解决这个问题。

来源

2017-06-05 subhra

我检查，我的机器上执行的代码。模态弹出窗口正在打开。可能是它没有通过if条件标准。首先，尝试打开弹出模式外部循环和条件。 – Shaybi

几件事情要在这里看到：

你需要按所选对象的数组作为 $scope.indUserDetails.push(obj)
请确保您有所有依赖项设置为bootstrap js and css
另外，您可以在HTML本身中设置data-target="#viewdetailssec"以获取模态参考。

function MyCtrl($scope) { 
 

 
    $scope.allUserInfo = [{ 
 
    user_id: 131, 
 
    name: "xyz" 
 
    }, { 
 
    user_id: 132, 
 
    name: "xyz" 
 
    }, { 
 
    user_id: 133, 
 
    name: "xyz" 
 
    }, { 
 
    user_id: 134, 
 
    name: "xyz" 
 
    }] 
 

 
    $scope.viewSearchDetails = function(userid) { 
 
    $scope.indUserDetails = []; 
 
    angular.forEach($scope.allUserInfo, function(obj) { 
 
     if (obj.user_id == userid) { 
 
     $scope.indUserDetails.push(obj); 
 
     } 
 
    }) 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<body ng-app ng-controller="MyCtrl"> 
 
    <input type='button' class='btn btn-xs btn-green' value='View' data-toggle="modal" data-target="#viewdetailssec" ng-click="viewSearchDetails(133);"> 
 

 
    <div class="modal fade" id="viewdetailssec" role="dialog" ng-if="indUserDetails.length >0"> 
 
    <div class="modal-dialog"> 
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title"></h4> 
 
     </div> 
 
     <div class="modal-body" ng-repeat="ind in indUserDetails"> 
 
      <p>{{ind}}</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 

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

来源

2017-06-05 10:46:48 Sajal

谢谢。它的工作正常。 – subhra

试试这个

$("#viewdetailssec").modal("show");

来源

2017-06-05 10:16:44

Nosti仍然存在同样的问题。 – subhra

无法使用Angular.js/Jquery动态打开模态窗口

回答

相关问题