CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Abhishek
Abhishek

Reputation: 3068

Angular data from controller into modal

I have a controller that looks as following:

var ModalDemoCtrl = function ($scope, $modal, $log) {
    $scope.items = [{name:'Category1', children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                          'CHIN-1312','CHIN-1411','CHIN-1412','CZEC-1311','CZEC-1312',
                          'FREN-1311','FREN-1312','FREN-1411','GERM-1311','GERM-1312',
                          'GERM-1411','GREE-1412','ITAL-1412','JAPN-1412','KORE-1412',
                          'LATI-1412','PORT-1412','RUSS-1412','SGNL-1301','SGNL-1302',
                          'SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                          'VIET-1312','VIET-1411','VIET-1412']},
                          {name:'Category2', children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                          'CHIN-1312','CHIN-1411','CHIN-1412','SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                          'VIET-1312','VIET-1411','VIET-1412']}];

    $scope.open = function () {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: ModalInstanceCtrl,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });

        modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };
};

and my modal looks like the following:

<a class="btn btn-default pull-right" data-toggle="modal" data-target="#myModal">Add Course <span class="glyphicon glyphicon-plus"></span></a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                <h4 class="modal-title" id="myModalLabel">{{subcategory.name2}}</h4>
            </div>
            <div class="modal-body" align="center">
                <font size="2" align="center">Required Credits : <span class="badge badge-machb">{{subcategory.required2}} </span>
                        Completed Credits : <span class="badge badge-machb">{{subcategory.completed2}} </span>
                        Planned Credits : <span class="badge badge-machb">{{subcategory.planned2}} </span></font>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

The question is how do i define buttons in such a way that it display it displays the children of the contents of "Category1" when a button named "category1" is clicked ina a modal and "Category2" when the corresponding is clicked?

The planned, required and completed credits in the above modal are from another controller and hence it can be neglected!

Upvotes: 0

Views: 2607

Answers (2)

ryeballar
ryeballar

Reputation: 30088

The answer is quite straightforward. See plunker to get a complete view of my discussion below.

  1. Iterate the items via ng-repeat and display each item.category as a button which is bound by an ng-click event and pass the index of the item to be used for the modal to resolve.

HTML

<body ng-controller="ModalDemoCtrl">
    <button ng-repeat="item in items" ng-bind="item.name" ng-click="open($index)"></button>
</body>
  1. The html fragment above suggests that the ng-click event callback open() must accept the current $index of the iterated items. Use the $index to get the specific category and pass it to the modal's controller ModalInstanceCtrl $scope to be used by the myModalContent.html template.

JAVASCRIPT

var ModalDemoCtrl = function ($scope, $modal, $log) {
  $scope.items = [{name:'Category1', children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                  'CHIN-1312','CHIN-1411','CHIN-1412','CZEC-1311','CZEC-1312',
                  'FREN-1311','FREN-1312','FREN-1411','GERM-1311','GERM-1312',
                  'GERM-1411','GREE-1412','ITAL-1412','JAPN-1412','KORE-1412',
                  'LATI-1412','PORT-1412','RUSS-1412','SGNL-1301','SGNL-1302',
                  'SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                  'VIET-1312','VIET-1411','VIET-1412']},
                  {name:'Category2', children:['SPCH-1311','SPCH-1315','SPCH-1321','ARAB-1311','ARAB-1312',
                  'CHIN-1312','CHIN-1411','CHIN-1412','SPAN-1311','SPAN-1312','SPAN-1411','SPAN-1412','VIET-1311',
                  'VIET-1312','VIET-1411','VIET-1412']}];

  $scope.open = function ($index) {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        item: function() {
          return $scope.items[$index];
        }
      }
    });
  };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, item) {
   $scope.item = item;
};

Upvotes: 2

jlents
jlents

Reputation: 820

I'm not sure if this is the answer you're looking for, but here it goes. It seems like you want it so that when you click a button, it will display the children of one of your categories. So, here's the code for that.

HTML to display a button for each category:

<button  ng-repeat="item in items" ng-click="displayChildren(item)"  ng-bind="item.name"></button>

UL to display the children when you select the button:

<ul>
    <li ng-repeat="child in children" ng-bind="child"></li>
</ul>

The code in the controller:

$scope.items = [
    {
        name: "category1",
        children: [
            "CHIN-1",
            "CHIN-2",
            "CHIN-3"
        ]
    },
    {
        name: "category2",
        children : [
            "VIET-1",
            "VIET-2",
            "VIET-3"
        ]
    }];

$scope.displayChildren = function(item){
    $scope.children = item.children;
}

Upvotes: 0

Related Questions