Ionic Material issue with item class - angularjs

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..

Related

Bootstrap carousel in ng-repeat

I have problem with Bootstrap carousel in ng-repeat, because images are not load one by one if carousel changes, but all images are load all at onece. I found similar questions in stackoverflow, but in my case I loading data from database (not use $scope)
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
The issue is that you are repeating all of your images inside an item of the carousel. A carousel item is defined by the "item" class. If you want a single image to displayed at once then repeat the items like so:
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<!-- add the `active` class to the first item with one-time binding (if $index is 0) -->
<div class="item {{::($index === 0 ? 'active' : '')}}" ng-repeat="product in main.products track by $index">
<div class="row">
<div class="col-xs-3"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>

Controller runs multiple time on click of item in angularjs?

In web app i am showing list of items using ng-repeat directive of angularjs. And on-click of each item am assigning a summary controller to the summary page (using ui-routing) and shows the result. Currently what happens if there is 10 list items showed using ng-repeat then 10 times summary controller is getting initialized on click of one item. Eventually which makes my app bit slow. Here is my ng-repeat code in html.
<div class="surveyList" ng-repeat="survey in allSurveys | filter:headerObj.search track by $index">
<span class="surveycheckbox" ng-click="toggleClass($event)"></span>
<div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-click="surveyIdForQuota(survey.SurveyID)">
<div class="col-xs-5 col-sm-2 col-md-4 surveyitleElipse">{{survey.SurveyName}}</div>
<div class="col-xs-5 col-sm-2 col-md-1">
<span class="title_thumb">
<span class='fa fa-mobile-phone' ng-show="survey.Type=='App'" title="APP" my-Tooltip />
<span class='fa fa-envelope-o' ng-show="survey.Type=='SMS'" title="SMS" my-Tooltip />
<span class='fa fa-desktop' ng-show="survey.Type=='Web'" title="WEB" my-Tooltip/>
</span>
</div>
<div class="col-sm-3 col-md-2 hidden-xs">{{survey.Date | date:'dd/mm/yyyy'}}</div>
<div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">124</div>
<div class="hidden-xs surveyListTool" ng-show="hoverEdit">
<a class="editSurvey" title="edit"><i class="fa fa-pencil fa-2"></i></a>
<a class="deleteSurvey" ng-click="sendsurveyID(survey.SurveyID)" data-surveyID="{{survey.SurveyID}}" ><i class="fa fa-trash-o fa-2"></i></a>
<a class="cloneSurvey" ng-click="cloneSurvey(survey.SurveyID)" title="clone"><i class="fa fa-clone fa-2"></i></a>
<a class="menuSurvey" title="menu">
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
</a>
</div>
</div>
<!-- On click Of the list am showing this div box -->
<div class="surveyDetailsBox"> <!--This is the header section -->
<div class="surveyDetailHead">
<p class="surveyTitle">{{survey.SurveyName}}</p>
<div class="surveyDetailHeadTool" >
<a class="editSurvey" title="edit" ng-click="showEditSurveyForm(survey.SurveyID,$index);"><i class="fa fa-pencil fa-2"></i></a>
<a class="deleteSurvey hidden-xs" ng-click="sendsurveyID(survey.SurveyID)" ><i class="fa fa-trash-o fa-2"></i></a>
<a class="menuSurvey" title="menu">
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
</a>
<a class="hidden-xs" title="close"><i class="fa fa-angle-up fa-2"></i></a>
</div>
</div>
<!--This is the body section where summary and other modules are present -->
<div class="surveyDetailContent hidden-xs" ng-if="is_desktop">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="col-xs-2 col-sm-2 col-md-2 leftMenu">
<div class="list-group">
<a ui-sref="survey.surveyList.details" class="list-group-item summary" ui-sref-active="active">Summary</a>
<a ui-sref="survey.surveyList.questionare" class="list-group-item " ui-sref-active="active">Questionaire Management</a>
<a ui-sref="survey.surveyList.sampleManagement" class="list-group-item " ui-sref-active="active">Sample Management</a>
<a ui-sref="survey.surveyList.quotaManagement" class="list-group-item " ui-sref-active="active">Quota Management</a>
<a ui-sref="survey.surveyList.scheduling" class="list-group-item " ui-sref-active="active">Scheduling</a>
<a ui-sref="survey.surveyList.notification" class="list-group-item " ui-sref-active="active">Notifications</a>
<a ui-sref="survey.surveyList.reports" class="list-group-item " ui-sref-active="active">Reports</a>
<a ui-sref="survey.surveyList.location" class="list-group-item " ui-sref-active="active">Geolocation</a>
</div>
</div>
<div class="col-xs-10 col-sm-10 col-md-10 rightContent" ui-view></div>
</div>
</div>
</div>
For each sub module like Summary, questionnare etc., one controller is associated.
On click of this list am showing the summary box and running the controller also.
Code for surveyIdForQuota() goes here
$scope.surveyIdForQuota = function(SurveyID){
$rootScope.quotaSurveyID = SurveyID;
$scope.exportViewDetails="";
$http.get(__env.apiUrl+"/UserSurvey/GetInvitationCount?surveyId="+$rootScope.surveysummaryID,{headers:{"Content-type":"application/json",'sessionID':$rootScope.token}}).
then(function(response){
console.log(response);
$scope.summaryDetails = response.data;
},function(error){console.log(error)})
};
ng-click should be add on the item of list
<div class="surveyList" ng-repeat="survey in allSurveys |filter:headerObj.search track by survey.SurveyID"> <div ng-
click="surveyIdForQuota(survey.SurveyID)">)">//rest code inside goes here</div></div>
Your first div is a parent div, but you wrote ng-click on the list. So if you click any place of the div. it will be call the method

Convert ng-click to Blaze in meteoric

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
},
});

How can i remove animation from few ion view

I am working on this app where i want menu + tabs for..
i have seen on one example on codepen and try to implement it ..here's the link "look for second seaction"
http://codepen.io/kmartinezmedia/pen/mFdkB
but its not working the way it suppose to be ..
I am using the page below as one tab and the same page with different content on another tab and I want no animation to give a feel that only the content has changed.
I think if there is any way i can remove the animation from this view , it will work....
or any other way to do that,....i am trying to fix this from 6 hrs ,
<ion-view class="tech-view" ng-controller="hrlDetailCtrl" view-title="C Language">
<ion-nav-bar class="bar-balanced big-bar" animation="no-animation" >
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<div class="tabs-background-balanced tabs-color-light" style="padding:0px;margin:0px;" >
<div class=" bar bar-subheader tabs tabs-icon-top" style="box-shadow: 0 2px 5px rgba(0,0,0,.26);">
<a nav-clear class="tab-item disable-user-behavior active" title="Home" nav-clear ui-sref="app.c">
<i class="icon ion-ios-book "></i>
Topic
</a>
<a nav-clear class="tab-item disable-user-behavior" title="Chat" nav-clear ui-sref="app.cpro">
<i class="icon ion-code"></i>
Programs
</a>
<a nav-clear class="tab-item disable-user-behavior" title="Drink" nav-clear ui-sref="app.cques">
<i class="icon ion-document-text"></i>
Ques / Ans
</a>
</div>
</div>
<ion-content class="padding spc-from-subheader" name="tabContent" animation="no-animation">
<div ng-controller="hrlistCtrl">
<div class="sub-topics-list" ng-repeat="hrl in hrlist | limitTo: 29 | limitTo: -14" class="my-item item-icon-left">
<a class="item item-icon-right " animation="no-animation" href="#/app/ct/{{hrl.id}}" style="border-width:0;border-style:none;background-color:#1E824C;">
<div class="has-border">
<h3 style="background-color:#1E824C;color:white">{{hrl.title}}</h3>
</div>
<i class="icon ion-ios-arrow-right"> </i>
</a>
</div>
</div>
</ion-content>
This works in Ionic 1.3.20.
angular.module('YOUR_APP_NAME_HERE').config(function($ionicConfigProvider) {
$ionicConfigProvider.views.transition('none');
});
http://ionicframework.com/docs/api/provider/$ionicConfigProvider#views.transition
Try using the config to disable:
$ionicConfigProvider.navBar.transition('none');

Angular ng-repeat, ng-mouseenter, ng-mouseleave

So I've got this repeated element...
<div ng-repeat="folder in user.mediaFolders | orderBy:'id'" class="pull-left media-folder">
<div class="folder-name">{{folder.name}}</div>
<div class="folder-body">
<i class="fa fa-picture-o text-muted"></i>
</div>
<div class="popunder">
<div class="popunder-caret"></div>
<div class="popunder-body">
<i class="fa fa-trash-o pull-left"></i>
<i class="fa fa-cloud-upload pull-right"></i>
</div>
</div>
</div>
The nested div with the popunder class should show when mouseover and hide with mouseout. I would write this in jQuery as so...
$('.media-folder').hover(
function(){
$(this).find('.popunder').show();
return false;
},
function(){
$(this).find('.popunder').fadeOut('fast');
return false;
}
);
How would I do this the Angular way?
You can do it all in the view using ng-show, ng-mouseenter and ng-mouseleave directives.
<div ng-repeat="folder in user.mediaFolders | orderBy:'id'" class="pull-left media-folder" ng-mouseenter="showDiv=!showDiv" ng-mouseleave="showDiv=!showDiv" ng-init="showDiv=false">
<div class="folder-name">{{folder.name}}</div>
<div class="folder-body">
<i class="fa fa-picture-o text-muted"></i>
</div>
<div class="popunder" ng-show="showDiv">
<div class="popunder-caret"></div>
<div class="popunder-body">
<i class="fa fa-trash-o pull-left"></i>
<i class="fa fa-cloud-upload pull-right"></i>
</div>
</div>
</div>
You can then use ngAnimate if you like some animation. Of course, there are other ways of achieving same.

Resources