i want to make modal window like this way http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
Here is my controller code :
$scope.showModal = function () {
$scope.modalMessage="Modal Message Custom"
modal.show();
};
UI design :
<ons-modal var="modal">
<h3>model message </h3>
<ons-button onclick="modal.hide()">Close</ons-button>
</ons-modal>
this my UI Now :
but want not full screen it should be like this
Related
I am building a cross platform application using Angular Kendo Mobile.
I have a Kendo list using "kendo-list-view".
<div kendo-list-view >
I want to get an event when user scrolls this list, in my controller.
I also tried to get the scroll event by using pure angular code, as mentioned in below question.
Bind class toggle to window scroll event
But in my case nothing happens and code inside the directive is not getting called.
UPDATE
I have my HTML with list view as below:
<kendo-mobile-view id="myListScreen" k-transition="'slide'" k-title="'My List'" k-layout="'default'" ng-controller="myListCtrl">
<kendo-mobile-header >
<kendo-mobile-nav-bar style="background-color: gray">
<kendo-view-title style="color: white"></kendo-view-title>
<kendo-mobile-button k-rel="'drawer'" href="#navDrawer" k-align="'left'"><img src="img/menu.png"></kendo-mobile-button>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<div class="myListMainDiv">
<div kendo-list-view
id="myListViewDiv"
class="myListViewDiv"
k-template="templates.myListViewItem"
k-data-source="myService.listDataSource"
ng-show="showListSelected"
></div>
</div>
<script id="myListViewItem" type="text/x-kendo-template">
<div id="{{dataItem.id}}" ng-click="onSelected(dataItem.id)">
{{dataItem.name}}
</div>
</script>
</kendo-mobile-view>
I am loading this page in my root page when user selects to navigate to this page using kendo.mobile.application.navigate("MyList.html");. And when controller for this page loads I have created list using new kendo.data.DataSource and I have attached new kendo.data.ObservableArray to my data source.
You can get the scroll event from the Scroller of your Kendo Mobile View,
For example if you have a view with id="myListScreen":
var kendoView = $('#myListScreen').data().kendoMobileView;
var scroller = kendoView.scroller;
scroller.bind("scroll", function(e) {
console.log(e.scrollTop);
console.log(e.scrollLeft);
});
You can find more info about the kendo scroller here on their documentation
is it possible to trigger the popover directive on an event? I'm trying to look for a string character and trigger a custom template, however, I cannot find a way to get my way around it, I only see custom attributes attached to a button.
You can use popover-is-open to display the popover on a given event.
Here is an example, where a timeout is used to simulate an event that shows the popover:
Markup:
<div ng-controller="PopoverDemoCtrl as vm">
Wait for 3 seconds for the event to happen...
<div uib-popover="Read the message!"
popover-title="Hello World!"
popover-placement="bottom"
id="popover"
class="btn btn-default spaced"
popover-is-open="vm.showPopover">
Popover
</div>
</div>
JavaScript:
function PopoverDemoCtrl($timeout) {
var popoverDemoCtrl = this;
popoverDemoCtrl.showPopover = false;
$timeout(function () {
popoverDemoCtrl.showPopover = true;
}, 3000);
}
PopoverDemoCtrl.$inject = ['$timeout'];
angular
.module('myApp', ['ui.bootstrap'])
.controller('PopoverDemoCtrl', PopoverDemoCtrl);
The full Fiddle: http://jsfiddle.net/masa671/gtgqof2k/
How can we trigger the button click event using AngularJs and show an alert message box? I have tried the alert("message") messagebox but it doesn't work.
You can use ng-click on button something like this:
Controller :
var VLogin = angular.module('myApp',[]);
VLogin.controller('TestCtrl', ['$scope',function($scope) {
$scope.clicked = function(){
alert("Clicked");
}
}]);
And in your HTML like :
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<button ng-click="clicked()">Click me!</button>
</div>
</div>
Here is the working Fiddle :- http://jsfiddle.net/nuejh9h6/
Thanks
we need to see what you have wrote but in general this is how ng-click works https://docs.angularjs.org/api/ng/directive/ngClick and you can write your alert code inside or in a new method and call it.
I want to get angular-strap modal content through a http service and after completion of service create a dynamic html content on basis of response, and show this content in modal.
In short need an event on which i can able to get modal content and than show that fetched content.
For ex i have a list of user, on click on user name i need to fetch that corresponding user details from server and after completion of service i need to show user profile in modal.
I tried below code for li creation and on click of each li i need a different model, which is fetched from server
<li ng-repeat="category in subCategories" id="{{category.id}}" ng-class="getCategoryIndex(category) != -1 ? 'inactive' : 'active';" ng-click="select_subCategory();"
data-template="questions.html" data-placement="center" data-animation="am-fade-and-slide-top" bs-modal="modal"
>
<i class="fa fa-check-circle"></i> {{category.name}}<div class="checkbox cross"><input type="checkbox" id="box_{{category.id}}" /><label for="box_{{category.id}}"></label></div>
</li>
Where questions.html is a static template and will be working fine for static template but how i will make it to be fetched from server as per li heading ?
Static Template Loads as :
<script type="text/ng-template" id="questions.html">
...
</script>
How to make template as per clicked li ?
It is possible in angular motion we can directly able to change ng-bind objects in a manner shown below :
$scope.change_content = function(){
$scope.aside = {title: 'Custom Title', content: 'Hello Custom Aside<br />This content can be fetched through an ajax request!'};
$scope.modal = {title: 'Custom Title', content: 'Hello Custom Modal<br />This content can be fetched through an ajax request!'};
var el = document.getElementById('trigger');
angular.element(el).triggerHandler('click');
};
I've noticed that in the ionic todo app example the stale/old todo information remains on the modal if I cancel the modal and open it back up again. What's the best place to clear/reset the old modal data so that it always has fresh blank fields after I cancel or submit the modal form fields?
Should I null or clear the task object somehwere? Reset the fields manually on close and create? Add a handler to some sort of on hide event?
Here's the angular/ionic example:
http://ionicframework.com/docs/guide/building.html
and a relevant snippet of code
// Called when the form is submitted
$scope.createTask = function(task) {
$scope.tasks.push({
title: task.title
});
$scope.taskModal.hide();
task.title = "";
};
// Open our new task modal
$scope.newTask = function() {
$scope.taskModal.show();
};
// Close the new task modal
$scope.closeNewTask = function() {
$scope.taskModal.hide();
};
and the modal
<div class="modal">
<!-- Modal header bar -->
<ion-header-bar class="bar-secondary">
<h1 class="title">New Task</h1>
<button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
</ion-header-bar>
<!-- Modal content area -->
<ion-content>
<form ng-submit="createTask(task)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="task.title">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Create Task</button>
</div>
</form>
</ion-content>
I've had the same problem. I first tried to clear my form data by clearing the model-object upon closing my modal window, just like you, but that only worked for when I submitted the form, it seems. When cancelling, it doesn't work! (Even if you explicitly clear the object before hiding the popup, it will not work)
I eventually fixed it by doing this:
$scope.newTask = function() {
$scope.task = {};
$scope.taskModal.show();
};
This way, every time the window is loaded, you clear the model. So the trick is not to do it when submitting data, but when opening the modal window. That did it for me at least.
Btw, I also needed an edit function for this same modal window, so I do this:
$scope.editTask = function(task) {
$scope.task = task;
$scope.taskModal.show();
};
The accepted answer is definitely correct but there is another way to achieve the same goal.
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
$scope.task = {};
});