Anuj Gupta Anuj Gupta - 17 days ago 12
AngularJS Question

Ionic Material issue with item class

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
1. 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.
2. 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).

Answer

Use this code instead

 <a href="#/app/profile" class="item item-avatar item-icon-right in done" ng-repeat="relatives in myRelative">  
Comments