無法使用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動態打開模態窗口

回答

相關問題