CODEWITHSUNDEEP
angularjs
terraterratott
terraterratott

Reputation: 33

How can i create a ng-repeat Modal bootstrap with angular

So I have the following simple JSON in my controller:

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

In my view, I have buttons generated by ng-repeat, and modals attached to each 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>

But for some reason, the modal just does not show up. I tried adding ng-show attribute, but that didn't work either. Somehow the ids aren't being generated properly.

Upvotes: 0

Views: 557

Answers (1)

vincentluth
vincentluth

Reputation: 149

You need to include the id selector '#' in data-target attribute, also for the selector to work button type needs no space.

<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>

Controller :

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

See working demo here

Upvotes: 2

Related Questions