I want to put a Steps Wizard into a Modal.
Here is my working Wizard: plunker http://plnkr.co/edit/achnwMtmebR3oc8bq7pp?p=preview
Here is my working modal: http://plnkr.co/edit/ux1Ju6m2s9VqiIPjmH1n?p=preview
How do I add this working wizard to a modal? Can nested states be multiple states or limited to no more than two?
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '/form',
templateUrl: 'form.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('form.profile', {
url: '/profile',
templateUrl: 'form-profile.html'
})
// url will be /form/interests
.state('form.interests', {
url: '/interests',
templateUrl: 'form-interests.html'
})
// url will be /form/payment
.state('form.payment', {
url: '/payment',
templateUrl: 'form-payment.html'
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/form/profile');
})
just merge your HTML and JS files, move ui-view inside modal
HTML:
<body ng-app="formApp">
<div ng-controller="MainCtrl as mainCtrl">
<button type="button"
class="btn btn-default"
ng-click="mainCtrl.page.open()">Open Modal</button>
<!-- modal -->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<!-- views will be injected here -->
<div class="container">
<div ui-view></div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default pull-left"
type="button"
ng-click="modalInstanceCtrl.modal.cancel()">Cancel</button>
</div>
</script>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="jumbotron text-muted text-center">
<p>a tutorial by scotch.io</p>
<p>Create a Multi-Step Form Using Angular and UI-Router</p>
</div>
</div>
</div>
</body>
plunker: http://plnkr.co/edit/NaTveRiM5OTufouRo2v7?p=preview
it's better not to put routing inside your modal. You better write your own form steps. The logic is easy. You do not need separate routes. When the "next" button is pressed, you will increase the pageNumber. You can put different divs for each page. You can hide/show the pages using ng-show or ng-hide directives.
Related
Please can someone help me with this problem.
.state('home',{
url:'home',
controller: 'mainCtrl',
templateUrl: 'index.html'
})
.state('home.profile',{
url:'/profile',
controller: 'proCtrl',
templateUrl: 'profile.html'
})
.state('home.category',{
url:'/category',
controller: 'cateCtrl',
templateUrl: 'category.html'
})
My index page is like this
<div class="col-sm-12 no-padding">
<div class="col-sm-3 hidden-xs">
<div class="col-xs-12">
<ul class="nav panel-group rm-border">
<li>
<a click-toggle ui-sref-active="active" class="row" ui-sref="home.profile">Profile</a>
</li>
<li>
<a click-toggle ui-sref-active="active" class="row" ui-sref="home.category">category</a>
</li>
</ul>
</div><br clear="all">
</div>
<div class="col-sm-9 no-padding">
<div class="row panel-heading rm-border no-margin">
<h4 class="panel-title"> {{title}}</h4>
</div>
<div class="row no-margin" ui-view></div>
</div>
</div>
Please i want a situation whereby i can load both index.html and also load another template when one click on my root "/home" route.
You will need to have your Home and category pages have this type of layout
HOME
<div>
show some cool things
</div>
<div ui-view></div>
CATEGORY
<div>
cool category things
</div>
Following UI Router guide will get you there. But in essence the view that needs to have another view 'nested' will need to have a div or another html element have the ui-view attribute on it
quick link to their Plunker
Thank you guys, i just did a redirect. It solves my problem.
I am using Mobile Angular UI.
In parent window there is list of category names. I want selected category name should get updated from modal. I am able to display modal. I want to pass selected category item from parent view to modal.
My code in parent view
<div ng-controller="CategoryController as TitleCats">
<div ng-repeat="cats in TitleCats.categories">
<a href=""
ui-turn-on="titleCatUpdatemodal"
class="btn btn-default" ng-click="TitleCats.openUpdateModel(cats)"> {{cats.name}} --> Edit</a>
</div>
<div ui-content-for="modals">
<div ng-include="'pages/titleCatUpdatemodal.html'"></div>
</div>
</div>
My Modal is
<div class="modal" ui-if='titleCatUpdatemodal' ui-state='titleCatUpdatemodal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="titleCatUpdatemodal">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p><input type="text" ng-model="cats.name" >{{ cats.name }}</p>
</div>
<div class="modal-footer">
<button ui-turn-off="titleCatUpdatemodal" class="btn btn-default">Close</button>
<button ui-turn-off="titleCatUpdatemodal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
When i click button it opens modal but no value!
Anyone please let me know how to get value in modal. Thanks in advance.
In your controller. you should have something similar to this:
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'templates/myModal.html',
controller: 'myModalCtrl',
resolve: {
myData: function () {
//do stuff
return stuff;
}
}
});
Inside that resolve, you can fill out the function which should then be accessible in your modals controller
I created a little example with a simple responsive caroussel that works as expected.
<body>
<div class="wrap">
<header>header</header>
<div class="main">
<div class="container fill" style="padding: 0px;">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="fill" style="background-image:url('app/images/image2.jpg');">
<div class="container">
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('app/images/image1.jpg');">
<div class="container">
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('//placehold.it/1024x700/CC1111/FFF');">
<div class="container">
</div>
</div>
</div>
</div>
<div class="pull-center">
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<footer>#Copyright</footer>
</div>
The matter is that when I bind it using angular, the images are not being displayed.
<div class="wrap">
<header>
</header>
<div class="main">
<div class="container-fluid" style="padding:0px;">
<div ng-view=""></div>
</div>
</div>
<div class="clear"></div>
<footer>
</footer>
</div>
And here is the code in my app.js file (the carousel is defined in the main.html file) :
var app = angular
.module('webappApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('HeaderCtrl', function ($scope, $location) {
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
});
I have no errors in the developer console, and in the network calls, the images are called and found. This it the output I have (only the controls are visible) :
To use ngView you need to have Routes set up. You didn't post any of your app JS code so it's hard to see where it might have gone awry, but generally the approach to do what I think you're asking would be:
Cut out the content for your carousel and put it in a separate .html file (called a "partial"). Make sure to leave out the footer and other elements that are part of your page "skeleton" and just put the content for your carousel into the partial
Add ngRoute to your app
Define routes ( in app.config() ). In your case, if it's just one page you'd likely use the ".otherwise" function on the RouteProvider and set the templateUrl to your partial html file
When route resolves, the partial is loaded into ngView (which can be an element, or an attribute of another element)
Without seeing your code it's tough to tell where you're having trouble, but my guess is that you're just trying to use ngView without routes; easy mistake to make.
I finally found the answer. I had to set the height of the div :
<div class="main">
<div ng-view="" style="height:100%"></div>
</div>
HTML body code.
<body>
<div ng-controller="MainCtrl as mc">
<div class='container'>
<div class='row navbar navbar-default navbar-fixed-top' style="background-color:#006633;">
<div class='col-md-6'>
<input style="margin-top:10px;" type="text" ng-model="SearchText" placeholder="Search for more than 10,000 products..." class='form-control' size="50">
</div>
<div class='col-md-2'>
<a ui-sref="Login" style="position:absolute; margin-top:15px; color:#FFFCBA"><strong>LOGIN</strong></a>
</div>
</div>
</div>
<div id="middle" class='container'>
<div class='row'>
<div id="right" class='col-md-10'>
<div ui-view></div>
</div>
</div>
</div>
</div>
</body>
Routing Code
sampleApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/Products/38/");
$stateProvider
.state('Products', {
templateUrl: "templates/Products.html",
url: '/Products/:SCID/:BrandID',
controller: 'ProductsController as pc'
})
.state('Login', {
templateUrl: "templates/Login.html",
url: "/Login",
controller: 'LoginController'
});
});
Controller
sampleApp.controller('ProductsController', function ($scope, $routeParams, $log, $rootScope, $stateParams, ProductService) {
$scope.$on('SearchTextChanged', function(event, SearchText) {
if (SearchText.length >=3) {
$scope.FilterExpr = SearchText;
}
});
});
Products.html template
<div ng-if="SearchText.length>=3" class='box' ng-repeat="product in pc.ProductService.Products | filter:FilterExpr | orderBy:'ProductName'">
<ng-include src="'commonTemplate.html'"></ng-include>
</div>
Every thing works fine until user click on login button. once user click on login button, controller moves to LoginController.
Now if user types in text box for searching the products, i want again product controller to be loaded to display the products.
How to do that? Any help?
I have a dialog which is being used in 3 scenarios within the same page. I have created a controller similar to the below:
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Im 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>
The issue is, that since this dialog is being used in 3 different parts of the same page, I have a problem with the template. When I put the html template outside of the controller, at the very end of the page html, it fails and gives me a 404.
However, I do not wish to repeat the same chunk of HTML in 3 places in the same page. Can someone tell me if there's a different way of calling the template which is outside the controller?
A good way to reuse your template is to put it in a separate html file and put its url in templateUrl. So $modal can get it from server every time needed.