CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Ben Adams
Ben Adams

Reputation: 21

Angular Bootstrap UI Modal - Next/Previous

I'm relatively new to Angular, and am using it to filter a large list of products, and then that list of products has the ability to be opened in a modal where additional details are displayed.

I've seen a working example of a next/previous modal that's NOT using bootstrap UI, but have yet to see one that IS using bootstrap UI.

Here's a Plunker with a simplified working list and modal via bootstrap UI but I've been going crazy trying to figure out how to show the next/previous modal from inside the opened modal?

http://plnkr.co/edit/mRxzn8crtkaKCL8SZlQB?p=preview 

    var app = angular.module('sortApp', ['ui.bootstrap']);
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, feature) {
    $scope.feature = feature;

    $scope.ok = function (feature) {

        $modalInstance.close($scope.feature);
    };


});

angular.module('sortApp').controller('mainController', function ($scope, $modal, $log) {

    // MODAL WINDOW

    $scope.open = function (_feature) {

        var modalInstance = $modal.open({
            controller: "ModalInstanceCtrl",
            templateUrl: 'myModalContent.html',
            keyboard: true,
            resolve: {
                feature: function () {
                    return _feature;
                }
            }

        });

    //No CLUE WHAT TO DO HERE!?
    $scope.showNext = function (_feature, index) {
        if ((index + 1) > ($scope.allfeatures.length - 1)) {
            return;
        }
        else {
            turtle.show = false;
            $scope.allfeatures[index + 1].show = true;
        }

    };

    };
    // create the list of features
    $scope.allfeatures = [
        //Website Widgets
      { index: 0, ID: 1, image: 'img/upload-tools.png', name: 'Upload Tools', type: 'Website Widgets', category: 'Registration, Exhibitor, Housing', description: 'Attendees can upload credentials, student verification letters, professional licenses and other documentation required to validate their registration status.' },
      { index: 1, ID: 1, image: 'img/translation.png', name: 'Website Translation', type: 'Website Widgets', category: 'Registration, Exhibitor, Housing', description: 'Microsoft Translator is used to translate your registration and housing websites with the click of one button.' },
      { index: 2, ID: 1, image: 'img/fundraising.png', name: 'Fundraising Motivator', type: 'Website Widgets', category: 'Registration, Exhibitor, Housing', description: 'Encourage your attendees to help you reach fundraising goals with visually appealing dynamically populated graphics.' },
      { index: 3, ID: 1, image: 'img/analytics.png', name: 'Google Analytics', type: 'Website Widgets', category: 'Registration, Exhibitor, Housing', description: "<h2>Know your audience</h2> <p>Google Analytics helps you analyze visitor traffic and paint a complete picture of your audience and their needs, wherever they are along the path to purchase. Giving you an edge on what your visitors need and want.</p> <h2>Trace the customer path</h2><p>Knowing where a customer is on your site, and how they got there is a critical part of finding out who they are. Tools like Traffic Sources and Visitor Flow help you track the routes people take to reach you, as well as the devices they use to get there. Armed with this valuable information an ideal user experience can be created for them.</P> <h2>Analyze important trends</h2> Utilize a tool like In-Page Analytics which lets you make a visual assessment of how visitors interact with your pages. Learn what they're looking for and what they like, then tailor all of your marketing activities for maximum impact." }
    ];


});

and the HTML

      <body ng-app="sortApp" ng-controller="mainController">
      <br>
      <div class="container">
        <ul  class="list-group">
          <li class="list-group-item" ng-repeat="feature in allfeatures">
            <a ng-click="open(feature)">
              <div class="card-content">
                {{ feature.name }}
              </div>
            </a>
          </li>
        </ul>
      </div>

  <!--MODAL WINDOW-->
  <script type="text/ng-template" id="myModalContent.html">

    <div class="modal-header">
      <h3>{{ feature.name }}</h3>
    </div>
    <div class="modal-body">

      <h5>{{ feature.category }}</h5>
      <h5>{{ feature.type }}</h5>
      </p>

    </div>
    <div class="modal-footer">

      <div class="row">
        <div class="col-sm-6 text-left">
          <a class="previous btn btn-default btn-lg" ng-click="showPrev(t, $index)"><i class="fa fa-arrow-left"></i> Previous</a>
        </div>
        <div class="col-sm-6 text-right">
          <a class="next btn btn-default btn-lg" ng-click="showNext(t, $index)">Next <i class="fa fa-arrow-right"></i></a>
        </div>
      </div>
    </div>

  </script>


</body>

Upvotes: 2

Views: 1088

Answers (1)

Pop-A-Stash
Pop-A-Stash

Reputation: 6652

Check this out: http://plnkr.co/edit/COFgAJ1UpZlHLEe2VOoq?p=preview

Your showPrev and showNext functions are supposed to go inside your ModalInstanceController:

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, feature) {

  $scope.feature = feature;

  $scope.showNext = function (feature, index) {
    $modalInstance.close("next");
  };

  $scope.showPrev = function(feature, index) {
    $modalInstance.close("prev");
  };

});

The logic for this part is nearly identical to the other example, except for what you do in each case:

angular.module('sortApp').controller('mainController', function ($scope, $modal, $log) {

    // MODAL WINDOW

    // create the list of features
    $scope.allfeatures = [
        //Website Widgets
      { index: 0, ID: 1, image: 'img/upload-tools.png', name: 'Upload Tools', type: 'Website Widgets', category: 'Registration, Exhibitor, Housing', description: 'Attendees can upload credentials, student verification letters, professional licenses and other documentation required to validate their registration status.' },
      { index: 1, ID: 1, image: 'img/translation.png', name: 'Website Translation', type: 'Website Widgets', category: 'Registration, Exhibitor, Housing', description: 'Microsoft Translator is used to translate your registration and housing websites with the click of one button.' },
      { index: 2, ID: 1, image: 'img/fundraising.png', name: 'Fundraising Motivator', type: 'Website Widgets', category: 'Registration, Exhibitor, Housing', description: 'Encourage your attendees to help you reach fundraising goals with visually appealing dynamically populated graphics.' },
      { index: 3, ID: 1, image: 'img/analytics.png', name: 'Google Analytics', type: 'Website Widgets', category: 'Registration, Exhibitor, Housing', description: "<h2>Know your audience</h2> <p>Google Analytics helps you analyze visitor traffic and paint a complete picture of your audience and their needs, wherever they are along the path to purchase. Giving you an edge on what your visitors need and want.</p> <h2>Trace the customer path</h2><p>Knowing where a customer is on your site, and how they got there is a critical part of finding out who they are. Tools like Traffic Sources and Visitor Flow help you track the routes people take to reach you, as well as the devices they use to get there. Armed with this valuable information an ideal user experience can be created for them.</P> <h2>Analyze important trends</h2> Utilize a tool like In-Page Analytics which lets you make a visual assessment of how visitors interact with your pages. Learn what they're looking for and what they like, then tailor all of your marketing activities for maximum impact." }
    ];

    $scope.open = function (_feature, index) {

        var modalInstance = $modal.open({
            controller: "ModalInstanceCtrl",
            templateUrl: 'myModalContent.html',
            keyboard: true,
            resolve: {
              feature: function () {
                return _feature;
              }
            }

        });

        modalInstance.result.then(function(result) {
          if (result == "next") {
            if(index +1 < $scope.allfeatures.length) {
                $scope.open($scope.allfeatures[index+1], index+1);
            }
          }
          else {
            if(index -1 >= 0) {
                $scope.open($scope.allfeatures[index-1], index-1);
            }
          }
        });
    };

Upvotes: 1

Related Questions