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'
  }
    ];
});

在我看来，我有按钮生成的按钮，以及每个按钮附带的模态：

<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属性，但这也不起作用。不知何故，ids没有正确生成。

Answer 1

您需要在'#'属性中包含ID选择器data-target，同样对于工作按钮类型的选择器也不需要空格。

<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

如何使用角度创建ng-repeat模态引导程序

1 个答案: