Question

我有一个问题。我试图使用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语句将执行但它根本不打开。请帮我解决这个问题。

Answer 1

尝试这个

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

Answer 2

这里看不到的东西：

您需要将数组中的选定对象推送为 $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>

无法使用Angular.js / Jquery

2 个答案: