I used ng-click as below in ionic:
<div class="list">
<a class="item item-icon-right nav-clear" href="#/app/list1" ng-click="closeMenu()">
<i class="icon ion-ios7-paper"></i>
Item 1
</a> ....
</div>
know I want to use Meteor with Meteoric. I don't know how to convert ng-click to Blaze version. Please guide me.
I didn't find anything about this in Meteoric guide page.
Try to set up a template around your html:
<template name="myTemplate">
<div class="list">
<a id="myDiv" class="item item-icon-right nav-clear" href="#/app/list1">
<i class="icon ion-ios7-paper"></i>
Item 1
</a> ....
</div>
</template>
Then put this code into your js file:
Template.myTemplate.events({
"click #myDiv": function( event) {
// yourFunction
},
});
Related
Here i am trying to add one page controller adding to another controller using same module in angular js. how can i add ctrl2.js menu to inside ctrl1.js.please help me currently i am using angualrjs one .. i am struck in this issue please give me a solution ...
menu.html:
<div id="left-top" ng-controller="two">
<ul class="nav navbar-nav navbar-right menu-top-left col-sm-12 col-xs-12">
<li>
<a href="#/">
<i class="material-icons mobile-menu-icon-color">exit_to_app</i>
<span class="notification mobile-menu-icon-color">Logout</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons mobile-menu-icon-color">person</i>
<span class="notification mobile-menu-icon-color">{{name}}</span>
</a>
</li>
</ul>
</div>
ctrl1.js
var app=angular.module('board',[]);
app.controller('one',function($scope){
alert("ctrlone');
});
ctrl2.js
var app=angular.module('board',[]);
app.controller('two',function($scope){
});
<div ng-controller="firstController">
<div ng-controller="secondController"></div>
</div>
if you want to use common $scope(your data) for ctrl1 and ctrl2, you need to create service for this, and after inject service to ctrl1, and ctrl2
I have two divs. I need to show one at a time.
<div ng-show="viewdiv">
</div>
<div ng-show="adddiv">
</div>
<a style="" href="#" ng-click="viewdiv=true" >View</a>
How to set adddiv = false? by this same ng-click.
ng-click="viewdiv=true,adddiv=false"
Is not working.
Use only one variable like viewdiv and use it like
<div ng-show="viewdiv">
</div>
<div ng-show="!viewdiv">
</div>
<a style="" href="#" ng-click="viewdiv=true" >View</a>
Using semi-colon to separate statements will work
<a style="" href="#" ng-click="viewdiv=true;adddiv=false" >View</a>
<button ng-click="showDiv = !showDiv">test </button>
<div ng-show="showDiv" >
Div
</div>
See sample snippet here
HTML
<div ng-show="viewDiv">
div1
</div>
<div ng-show="!viewDiv">
div2
</div>
<a style="" href="#" ng-click="viewDiv = !viewDiv" >Click</a>
Controller
$scope.viewDiv = true;
See http://jsfiddle.net/y9wy70ng/
Additionally you may play with
<a style="" href="#" ng-click="viewDiv = !viewDiv">Change to
<span ng-show="viewDiv">div2</span>
<span ng-show="!viewDiv">div1</span>
</a>
See http://jsfiddle.net/sdp9t96b/
I am working with Ionic material demo app and I am facing with some issue .When i am Not using "item class" then everything will be ok but UI is not as expected because I am not using that class.code is as following
<div class="list half" >
<div class="card card-gallery item-text-wrap" ng-repeat="picsItem in myPics" > *<!-- no item class here -->*
<div class="ink dark-bg">
<h2>{{picsItem.Title}}</h2>
<img ng-src="{{picsItem.Image}}" class="full-image" ng-last-repeat="mylist">
</div>
<div class="tabs tabs-secondary tabs-icon-left"> *<!-- no item class here -->*
<a class="tab-item stable-bg assertive">
<i class="icon ion-heart"></i>
{{picsItem.Like}}
</a>
<a class="tab-item stable-bg positive-900">
<i class="icon ion-chatbubbles"></i>
{{picsItem.Comment}}
</a>
</div>
</div>
</div>
When I am Using "Item Class" (as per the demo app)then i am facing issue Uncaught TypeError: Cannot read property 'className' of undefined and nothing display. I have created a Pen for this (
https://codepen.io/anujsphinx/pen/jVqvaV) . I tried some solution(https://github.com/zachfitz/Ionic-Material/issues/46) but didn't get success .Need result with item class
<div class="list half" >
<div class="item card card-gallery item-text-wrap" ng-repeat="picsItem in myPics" >
<div class="ink dark-bg">
<h2>{{picsItem.Title}}</h2>
<img ng-src="{{picsItem.Image}}" class="full-image" ng-last-repeat="mylist">
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item stable-bg assertive">
<i class="icon ion-heart"></i>
{{picsItem.Like}}
</a>
<a class="tab-item stable-bg positive-900">
<i class="icon ion-chatbubbles"></i>
{{picsItem.Comment}}
</a>
</div>
</div>
</div>
I have created 2 more pen to resolve confusion
http://codepen.io/anujsphinx/pen/yVOdad this is default code without ng-repeat (and item class in div) . This type design i want with ng-repeat.
http://codepen.io/anujsphinx/pen/yVOdJd this is code with ng-repeat (if i remove item class in <a href="#/app/profile" class="item item-avatar item-icon-right" ng-repeat="relatives in myRelative">then it will work but not properly).
Basically problem is not with 'item' class you can remove 'animate-fade-slide-in' and its working fine...
ionicMaterialMotion.pushDown({
selector: '.push-down'
});
ionicMaterialMotion.fadeSlideInRight({
selector: '.animate-fade-slide-in .item'
});
so .animate-fade-slide-in .item affecting your code..
I have this view, its loaded with ng-view in my index.html.
This is a snippet of the view:
<div class="window">
<div class="top">
<div class="windowTitle">
<i class="fa fa-list"></i>{{vm.workout.Name}}
//STACKOVERFLOW LOOK HERE
<div ng-click="vm.save()" id="btnSave" class="fa fa-floppy-o">123</div>
</div>
</div>
<div class="windowContent">
//STACKOVERFLOW LOOK HERE
<div ng-click="vm.save()" id="btnSave" class="fa fa-floppy-o"></div>
<div class="windowRow setList animatedList" ng-repeat="(index, set)
As you see, i have 2 buttons with ng-click="vm.save()"
The first one does not work, but it has been working for days.
Then i added the second one for testing, and it works, very wierd.
They both reside inside the same ng-view, which has the same controller assignted to them by the ng routing.
So im in the view, the right controller is active, but only one button is working, clues?
It was because i had an open angular expression in the same div.
<div class="window">
<div class="top">
<div class="windowTitle">
<i class="fa fa-list"></i> <span>{{vm.workout.Name}}</span>
//STACKOVERFLOW LOOK HERE
<div ng-click="vm.save()" id="btnSave" class="fa fa-floppy-o">123</div>
</div>
Works like a charm :)
I am trying to create an angular app with Intel-XDK
I have latitude value in $scope.latitude and longitude value in $scope.longitude.what I need is when I click on ngclick() the map will be open outside the application.Here in my code map is working in intel XDK.but when I host the application it is not working.
Index.html
<div class="item item-divider" style="font-size:18px;">
<i class="icon ion-map"></i>
<a ng-click="launchGoogleMaps()">Location map</a>
</div>
App.js
app.controller('main', function ($scope,$interval,$ionicModal,localStorageService,$http,$q,$templateCache) {
<div class="item item-divider" style="font-size:18px;">
<i class="icon ion-map"></i>
<a ng-click="launchGoogleMaps()">Location map</a>
</div>
});
You can simply open google map by changing index.html.No need to write javascript
div style="padding-left:10px;">
<i class="icon ion-map"></i><a href="http://maps.google.com/maps?ll={{temple.latitude}},{{temple.longitude}}">
Location Map</a>
</div>
This is incorrect syntax:
app.controller('main', function ($scope,$interval,$ionicModal,localStorageService,$http,$q,$templateCache) {
<div class="item item-divider" style="font-size:18px;">
<i class="icon ion-map"></i>
<a ng-click="launchGoogleMaps()">Location map</a>
</div> //especially this part...
});
It would be hard for anything to work if you don't have proper syntax you will get copious syntax errors here.
After looking at your fiddle: you defined url twice with var each time what is the point of that?
Also, what commands did you run in the command line did you do like ionic build ?