Actually I want to create a calendar like Google calendar, In which user can able to create events. So that I want a popover when user clicks on cells. Please give me any suggestion for this. I have also confused between ng-grid and ui-calendar, which is the best option for drawing calendar, binding click event etc.
Thanks in advance.
No reason to worry about ng-grid, you could build a calendar out of it but the existence of ui-calendar makes that just a good coding/css exercise.
The Angular UI Calendar (https://github.com/angular-ui/ui-calendar) is a wrapper around the jQuery fullcalendar plugin (http://arshaw.com/fullcalendar/docs/). You can use the documentation on the latter and pass options right through the directive.
Example from the GitHub page referenced above:
myAppModule.controller('MyController', function($scope) {
/* config object */
$scope.calendarConfig = {
height: 450,
editiable: true,
dayClick: function(){
scope.$apply($scope.alertEventOnClick);
}
};
});
<div ui-calendar="calendarOptions" ng-model="eventSources">
Related
I would like to use Dropdown component and provide two options OK and reset buttons (as provided in Table example),
after some research I didn't find any mention about this functionality in Dropdown or Menu component api,
Does anyone implemented such functionality outside of Table components, any inputs how this is work?
The code implementing the OK and RESET options of that component are implemented specifically for the table dropdown here (https://github.com/ant-design/ant-design/blob/master/components/table/filterDropdown.tsx#L196-L222).
You can either implement it similarly (i.e. wrap the Menu with a div and handle the events yourself) or you could create an ant design github ticket and ask whether a) this should be part of the design specification and b) whether there should be a reusuable way to consume this
According to this issue in github such functionality can be reached via Popover with Menu + Buttons
You will want to bind to the change event via javascript/jQuery.
On $(document.ready() you can call a function that will do this binding.
Then you just check the value of the dropdown via a jQuery selector.
<script>
$(document).ready(function() {
$("dropdownSelector").change(function() {
var val = $(this).value();
//logic to do things
});
});
</script>
You can check out different ways to use jQuery selectors here: https://api.jquery.com/category/selectors/
I'm trying to detect if a user has focus on md-contact-chips.
On all other controls it can easily be detected inside a form via formName.controlName.$touched
Here is the CodePen
Thanks in advance.
I think the md-contact-chips are not a form element or a link, and thus don't have the ability to gain / lose focus. (source: AngularJS docs on ngFocus) You could bind ng-click on md-contact-chips though.
Example CodePen which binds ng-click and receives the model value of the clicked md-contact-chips.
As you can see I added a ng-click to the md-contact-chips element:
<md-contact-chips ng-click='ctrl.chipFocus(ctrl.contacts)'
And I added the chipFocus method to the AngularJS controller:
self.chipFocus = function(contact) {
alert('focus gained');
console.log(contact);
//you could do something with contact here
};
This might be the answer to your question, but if you want the chips input to add on loseFocus, or tab, you can add this:
md-add-on-blur="true"
Reference: https://github.com/angular/material/pull/9095
I want to have a column chart in my angular app that could be drilled down to a line chart. I think the main problem is to be able to handle click event on each column that I could not find it highchart nor angular-chart. Can you tell me a way to construct such thing?
ZingChart has an Angular directive that works well with your use case. You can use the directive with ZingChart's internal events to bind to just about anything on the chart :
zingchart.node_click = function(p) {
....
}
Demo : http://jsfiddle.net/mschultz/ck84wjce/
Angular Directive: https://github.com/zingchart/ZingChart-AngularJS
Docs : http://www.zingchart.com/docs/api/api-events/
It can also perform drilldowns fairly easily across different types of charts: http://www.zingchart.com/blog/2014/09/02/chart-drilldown-interactive-feature/
If you need any help, feel free to reach out - I work for the ZingChart team!
Check out this page for an example on Angular Drill Down chart using CanvasJS Angular Chart. It also includes angular source code or download angular sample from download page.
Check this StackBlitz for a simple example.
I am trying to open the modal dialog from javascript when a certain condition is met. The example shown here http://angular-ui.github.io/bootstrap/ invokes the modal on ng-click.
How do I achieve showing modal when a certain condition is met?
Thanks
Additional Info
Sorry didn't mean to create confusion. I am going to clarify a little bit more by saying what I meant by "certain condition". The scenario is the user will search for customer by name and will get a list of customers back matching with the search string. The user then clicks on any one of the customer row to get more detail information.
When clicked the code control is handed off to Controller (It's an ASP.Net MVC app) which will then go through other classes and finally get data of the customer from database. It will then populate a boolean property called spouseNotFound. It then returns the JSON back to angularjs controller. Now assume that if this particular customer does not have spouse I want to show a modal saying that "Spouse not found".
So, no, I don't want the modal to be invoked on an event, rather than on business rule condition.
Hope that helps to understand things clearly.
Straight from the documentation.
$modal is a service to quickly create AngularJS-powered modal windows. Creating custom modals is straightforward: create a partial view, its controller and reference them when using the service.
Example plnkr. (http://plnkr.co/edit/?p=preview)
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
If anyone needs an easy approach to showing Bootstrap Modals with AngularJS, then you can simply use the following approach. It worked well for me:
var element = angular.element('#myModal');
// Open dialog
element.modal('show');
// Close dialog
element.modal('hide');
What you may be looking for is a $watch on your scope. This will allow you to monitor a variable, and when the value is what you want, then launch the modal as Nix describes.
$scope.$watch('entities', function(){
if($scope.entities[0].checked && $scope.entities[1].checked){
alert("If I were bootstrap, I'd be launching a modal right now!");
};
}, true);
A jsfiddle: http://jsfiddle.net/HB7LU/1636/
I would like to create a modal view with angular, but I cannot find any resource online. Can anyone point me into the right direction?
What I mean by modal view is like when clicking on a photo on facebook: it will open on top of the page so that clicking in the background will bring back to the main view.
Of course, I am not looking for css details on how to achieve the lightbox effect.
Thanks in advance.
After experimenting with various options, including the Angular-UI-bootstrap modals, I have come to a pretty satisfying custom solution that provides all functionality you'd want from a modal:
<div class="myBackdrop" ng-show="flag.modalOpen" ng-click="closeModal()"></div>
<div class="myModal" ng-show="flag.modalOpen">
...
</div>
where
// just a boolean flag
$scope.flag = {
modalOpen: false
}
$scope.closeModal = function() {
// optionally do something beforehand
$scope.flag.modalOpen = false;
}
Then all you need is the CSS for .myBackdrop and .myModal
You can use http://angular-ui.github.io/bootstrap for a comprehensive solution.
You can also build it yourself for simple solutions using ng-show on a modal element :-)
Check out this open-source modal(in AngularJS) from ui-bootstrap. It takes advantage of modularity through directives and covers many usability features. This would be a great reference point to build a re-usable solution, even without the Bootstrap CSS.
https://github.com/angular-ui/bootstrap/tree/master/src/modal