Angular.js/Jqueryを使用してモーダルウィンドウを動的に開くことができませんでした

問題があります。 Angular.jsとJqueryを使用して動的に1つのポップアップウィンドウを開くようにしようとしていますが、開かないようにしています。私は以下のコードを説明しています。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(); 
     } 
    }) 
    }

ここでは、if文が実行されていても開きませんが、ポップアップウィンドウを開く必要があります。この問題を解決するのを手伝ってください。

出典

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

こちらを参照するには、この1

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

出典

2017-06-05 10:16:44

これまでも同じ問題があります。 – subhra

Angular.js/Jqueryを使用してモーダルウィンドウを動的に開くことができませんでした

答えて

関連する問題