如何创建一个NG-重复模态自举具有角

Question

所以我在我的控制器的以下简单JSON：

var app = angular.module('MyApp', []); 
app.controller('loadCtrl', function($scope,$http) { 

    $scope.buttons=[ 
    {Id:'1', type:'First Button' 
    }, 
    {Id:'2', type:'2nd Button' 
    }, 
    {Id:'3', type:'3rd Button' 
    } 
    ]; 
}); 

我认为，我已经按钮通过NG-重复产生的，模态附连到每个按钮：

<div ng-app="MyApp" ng-controller="loadCtrl" class="container"> 
<div ng-repeat="button in buttons" class="btn-group"> 
    <div class="btn btn-sq-lg btn-primary" data-toggle="modal" ng-attr-data-target="{{button.type+'Opts'}}">{{button.type}} 
    </div> 



<!-- Modal --> 
<div ng-attr-id="{{button.type+'Opts'}}" class="modal fade" role="dialog"> 
    <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">{{button.type}}</h4> 
     <h5> Record:{{date | date:'yyyy-MM-dd-HH:mm:ss'}}</h5> 
     </div> 
     <div class="modal-body"> 
     <textarea name="Reason" class="form-control" rows="5" style="min-width: 100%"></textarea> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 

但由于某些原因，该模式就是不露面。我尝试添加ng-show属性，但那也不起作用。不知怎的，ID不能正确生成。

Answer 1

您需要在data-target属性中包含id选择器'#'属性，也用于选择器工作按钮类型不需要空间。

<div ng-app="MyApp" ng-controller="loadCtrl" class="container"> 
    <div ng-repeat="button in buttons" class="btn-group">   
    <div class="btn btn-sq-lg btn-primary" data-toggle="modal" data-target="{{'#' + button.type+'Opts'}}">{{button.type}} 
    </div> 



    <!-- Modal --> 
    <div id="{{button.type+'Opts'}}" class="modal fade" role="dialog"> 
     <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">{{button.type}}</h4> 
      <h5> Record:{{date | date:'yyyy-MM-dd-HH:mm:ss'}}</h5> 
      </div> 
      <div class="modal-body"> 
      <textarea name="Reason" class="form-control" rows="5" style="min-width: 100%"></textarea> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

     </div> 
    </div> 

控制器：

var app = angular.module('MyApp', []); 
app.controller('loadCtrl', ['$scope', '$http', function($scope, $http) { 

    $scope.buttons = [{ 
    Id: '1', 
    type: 'FirstButton' 
    }, { 
    Id: '2', 
    type: '2ndButton' 
    }, { 
    Id: '3', 
    type: '3rdButton' 
    }]; 
}]); 

见工作演示here