I am completely new to Angular js and I want to perform an operation i.e. clicking on a button would slide in a div from the right and clicking back again would send it back to right. Basically toggle it.
I know how to do with jquery as below, but the need is to do it in angular.
HTML:
<body>
<div>
Click me
</div>
<div id="content">
<div id="list">
</div>
</div>
</body>
CSS:
#clickhere {display:block; width:50px; height:50px; background:#999;}
#list{width:200px; height:100%; position:absolute;top:0;right:-200px;background:#323232;}
.slidein{right:0;}
JS:
$("#clickhere").click( function(){
if($("#list").css("right")== "0px")
{
$("#list").animate({right:"-200px"}) }
else{
$("#list").animate({right:"0"})
}
})
jsfiddle - http://jsfiddle.net/RJJwu/3/
Can anyone please help me with the angular code. I looked over a couple of examples such as :
1) Different transitions with AngularJS
2) http://mgcrea.github.io/angular-motion/ - in section Slide, 2nd button
The above links represent my actual need. I tried doing it via 1st link, but its not working.
Hint : add or remove a class (ngClass or ngHide) when the user click on the button (ngClick) and do the animation in CSS (transition).
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
My html:
<div id="contentDiv">
<div id="headerDiv" ><div id="titleDiv"> Queries</div></div>
<div id="valuesDiv" ><div id="yearDiv"> 2015</div></div>
<div id="graphDiv" ><div id="chartDiv">graph</div></div>
</div>
Like this div, I have another div but the content in the div is different.
How to add a new div horizontally when I click on hyperlink using angularjs?
How can I do this? please help me out regarding this
Looks like what you need is a two way binding with the ng-model directive. So the idea would be that you bind the new div to a variable in your scope which is initially in an empty or undefined state (for example, there are better ways). When the hyperlink is clicked it calls the function specified by an ng-click directive which will fill your bound object, which in turn will cause the new div to be rendered.
EDIT:
Based on your comments here is a simple example.
HTML page:
<div id="newDiv" ng-repeat="item in items">
<!-- Div content -->
<!-- example -->
<input type="text" ng-model="item.name">
</div>
<input type="button" ng-click="addItem()">
Controller:
$scope.items=[];
$scope.addItem = function() {
var newItem = {};
newItem.name = "new item name";
$scope.items.push(newItem);
}
What's happening here is the data for each div is stored in an array of objects. The ng-repeat directive will repeat the div for each object in the array. You can then fill the elements in the div using the object. Adding a new div is as simple as adding a new item to the array and angular will take care of the rest for you. Please note that I have not tested this example, but hopefully it's enough to point you in the right direction.
RE aligning the divs horizontally, this will be done with CSS, using the inline-block display mode. So you could give the div a class of, for example, "horizontalDiv" and add the following class to your CSS file:
.horizontalDiv {
display: inline-block;
}
With OnsenUI 1.0.4 I used this command ons.navigator.getCurrentPage().options.onLeftButtonClick to get the click event(string) for the left button from navigation bar.
In OnsenUI 1.1.x I changed my project to use the ons-toolbar.
How do I get the left button now?
Thank you
One solution is using ng-click or onclick attribute to button tag s.t.
<ons-toolbar>
<div class="left"><ons-toolbar-button ng-click="myNavigator.popPage()">Btn</ons-toolbar-button</div>
....
Another solution is using addEventListener as usual javascript s.t.
<div ng-controller="TbCtrl">
<ons-page>
<ons-toolbar>
<div class="left"><ons-toolbar-button class="btn2">Btn2</ons-toolbar-button></div>
....
and
app.controller("TbCtrl",function($scope){
var elem = document.querySelector(".btn2");
elem.addEventListener("click",function(){
alert("OK"); // Your Code Here
} ,false);
});
I am using ng-show #animation.
index.html: -
<body>
<div ng-view></div>
</body>
templateURL contains:-
<button ng-init='shw=false', ng-click='shw=!shw;', class='share'> press me </button>
<div ng-init='shw=false', ng-show='shw', class='animate-show'>
<h1> this is animation showing </h1>
<h2> even in the begining which it should not </h2>
</div>
In the above code the templateURL file should not show or slide up when page loads.
Please view the following two plunkrs.
This is expected behavior
This is the behavior we get when using ngAnimate and ngRoute together.
You can use ng-if in place of ng-show to get your desired animation.
You can checkout this plunker I created using your sample code.
http://plnkr.co/edit/ZzxrwzecaX2yrEcSwvEn?p=preview
I have 2 CakePHP pages. Both of them use angularjs. Here's a snippet.
/items/items.ctp
<div id="ng-app" ng-app>`
<div ng-controller="ItemController">
Add
</div>
</div>
the function showAddPopup is defined as follows
$scope.showAddPopup = function() {
$.colorbox({href:'/items/add/' + $scope.order.id,open:true,close : "x", onClosed:function(){}});
}
/items/add.ctp
<div id="ng-app" ng-app>`
<div ng-controller="AddController">
<h2>{{order.label}}<h2>
</div>
</div>
Now, when I click on the add link from items view, I get a popup with the contents of add.ctp. But the problem is that instead of showing order label say 'My Order', the h2 tag is showing {{order.label}}
When I open add view from a page that doesn't use angularjs I get a proper result. What am I doing wrong. Please help. I have already wasted many days on this.
Maybe opening the colorbox with setting iframe could be the solution, if the problem is nested ng-apps.
$.colorbox({inline:false; iframe:true;href:'/items/add/'...});
If you are using bootstrap then angular-ui would be a great choice for above scenario