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">×</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!
The answer is quite straightforward. See plunker to get a complete view of my discussion below.
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>
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;
};
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;
}
Related
I can't figure out why the content in my array isn't outputting in the modal.
I'm doing a ng-repeat. the buttons are pulling from the array, but the content inside the modal is blank. Can anyone tell me whey?
Here's a jsfiddle:
http://jsfiddle.net/8s9ss/203/
<div ng-app="app">
<div ng-controller="RecipeController">
<div ng-repeat="recipe in ChickenRecipes">
<button class="btn btn-default" ng-click="open()">{{ recipe.name }}</button> <br />
<!--MODAL WINDOW-->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>Recipe: {{ recipe.name }}</h3>
</div>
<div class="modal-body">
Recipe Content<br />
{{ recipe.cookTime }}
{{recipe.directions}}
</div>
<div class="modal-footer">
</div>
</script>
</div>
</div>
</div>
$modal create a child scope (and default is child of $rootScope) for the modal
So what you need is something like this:
$scope.open = function (recipe) {
$scope.recipe = recipe;
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
scope: $scope,
});
};
And:
<button class="btn btn-default" ng-click="open(recipe)">{{ recipe.name }}</button> <br />
P/s: It's better to use $modal's resolve and controller option (pass the resolved data to the new controller)
You are mixing up some concepts, putting the modal template inside the ng-repeat won't do a thing. That's not how modals work.
First, remove the template from the ng-repeat and put it elsewhere.
Then, you must create a controller for your modal:
app.controller('RecipeModalController', function($scope, $modalInstance, $modal, item){
$scope.recipe = item;
console.log(item);
});
And pass the recipe you want to open as a parameter on ng-click:
$scope.open = function (recipe) {
var modalInstance = $modal.open({
controller: 'RecipeModalController',
resolve: {item: function() {return recipe} },
templateUrl: 'myModalContent.html',
});
};
I've updated the fiddle to show it: http://jsfiddle.net/8s9ss/204/
I am trying to pass some data with a function to display on a modal, yet the usual approaches to binding are not working, I was hoping someone could point me in the right direction.
$scope.openModal = function (obj) {
//$scope.data = {type: obj.type, descriptions: obj.description, isDone: obj.isDone, createDate: obj.createDate, priority: obj.priority};
$scope.data = obj;
console.log($scope.data);
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'modalTemplate.html',
controller: 'View1Ctrl',
resolve: {
data: function () {
return $scope.data;
}
}
});
}
Template
<!-- MODAL -->
<div>
<div ng-controller="View1Ctrl">
<script type="text/ng-template" id="modalTemplate.html">
<div class="modal-header">
<h3 class="modal-title">Item Details</h3>
</div>
<div class="modal-body">
<ul>
<li>Type: <span ng-model="data.type"></span></li>
<li>Description: <span ng-model="data.description"></span></li>
<li>Date: <span ng-model="data.createDate"></span></li>
<li>Priority: <span ng-model="data.priority"></span></li>
<li>Finished: <span ng-model="data.isDone"></span></li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$close()">OK</button>
</div>
</script>
</div>
Also tried {{data.type}} etc, and ng-bind. I now my $scope.data is populated because it is showing as much in the console.
You should inject data (resolve object) into your modal controller then add it to the $scope object.
You should remove ng-controller="View1Ctrl" from template.
I am using angular-formly to build a form inside an angular-ui-bootstrap modal, the following code works when the form is placed outside the modal template but it doesn't when placed inside the ng-template, it just doesn't print the fields at all.
I believe this should work but I don't know how the life-cycle of angular-formly runs, so I am unable to identify how to make the fields show up inside my bootstrap modal template.
The issue is clearly related to the ng-template, it appears not to render the form even if the fields array is passed correctly.
var app = angular.module("demo", ['dndLists', 'ui.bootstrap', 'formly', 'formlyBootstrap']);
app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items, User) {
var vm = this;
vm.loadingData = User.getUserData().then(function(result) {
vm.model = result[0];
vm.fields = result[1];
vm.originalFields = angular.copy(vm.fields);
console.log(vm);
});
});
app.controller("AdvancedDemoController", function($scope, $uibModal){
$scope.modalOpen = function(event, index, item){
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'md',
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
In my view:
<!-- Template for a modal -->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<div ng-if="vm.loadingData.$$state.status === 0" style="margin:20px 0;font-size:2em">
<strong>Loading...</strong>
</div>
<div ng-if="vm.loadingData.$$status.state !== 0">
<form ng-submit="vm.onSubmit()" novalidate>
<formly-form model="vm.model" fields="vm.fields" form="vm.form">
<button type="submit" class="btn btn-primary submit-button">Submit</button>
</formly-form>
</form>
</div>
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
</script>
Any ideas?
When calling $uibModal.open you need to specify controllerAs: 'vm' (that's what you're template assumes the controller is defined as).
I am using html5, angularjs, bootstrap. So each one of them gives many options to create a modal window. Whole of my website has 2 things, one is confirmation dialog or form dialog. So which is the best reusable approach. Should i use html5 or create a directive ?
As mentioned in the comments ui-bootstrap Modal is very useful.
Just for an example here is a factory for confirm modal that you can extend according to your use case:
yourApp.factory("dialog", ["$modal",
function($modal) {
var dialogService = {
confirm: function(options) {
var modalInstance = $modal.open({
templateUrl: 'partials/confirm-modal.html',
controller: ['$scope',
function($scope) {
$scope.header = options.header;
$scope.body = options.body;
$scope.confirmText = options.confirmText || "Close";
$scope.cancelText = options.cancelText || "Confirm";
$scope.hideCancelButton = options.hideCancelButton;
$scope.cancel = function() {
modalInstance.dismiss('cancel');
};
$scope.confirm = function() {
modalInstance.close();
};
}
]
});
return modalInstance.result;
}
}
}
])
And here is your template:
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="btn close" ng-click="cancel()">×</button>
<h4 id="noteLabel" class="modal-title">{{header}}</h4>
</div>
<div class="modal-body">
<p ng-bind-html="body" style="font-size: 16px"></p>
</div>
<div class="modal-footer">
<button ng-show="!hideCancelButton" class="btn btn-default" ng-click="cancel()">{{cancelText}}</button>
<button ng-click="confirm()" class="btn btn-primary">{{confirmText}}</button>
</div>
I am trying to learn angular ui and copy pasted a demo from their website into a jsfiddle. For some reason it's not working and not giving an error. Can anybody see what I am doing wrong?
If you go into the jsfiddle below and then click the open button nothing happens and there is no error.
JSfiddle: http://jsfiddle.net/baswg1wz/1/
Javascript:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
HTML
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
It's not giving any errors because you didn't bootstrap your Angular application. You should wrap your entire html in a div (in a real page you should do this on the html or body tag) and then use the ng-app attribute to initialize/bootstrap your application:
<div ng-app="ui.bootstrap.demo">
<!-- your html -->
</div>
Also i noticed you didn't include the right ui library, you're using:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
You should be using: (also note the http://)
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
Furhermore, when using Angular in JSFiddle you should use the no wrap - in <head> option.
That should get you a lot further, but i would recommend using Plunker, if you checked the modal example on the ui.bootstrap site you could have noticed the blue Edit in plunker on the topright of the code, try clicking that.
http://angular-ui.github.io/bootstrap/#/modal