I have ng-class inside of my ion-list if the user clicks an item it adds the class selected. The problem when using collection-repeat is its managing the DOM and changing the selected class as I scroll.
<ion-list>
<ion-item collection-repeat="contact in contacts | filter:filters" class="contact" ng-click="pickContact($index, $element, this.contact)" ng-model="contactModel" ng-class="{'selected': contact.selectedContact}" toggle-contacts="selected" collection-item-height="150" collection-item-width="'33.3%'">
<div ng-if="contact.photo.type == 'img'" class="contact-img">
<img ng-src="{{contact.photo.value}}.png" alt="">
</div>
<div ng-if="contact.photo.type == 'text'" class="contact-text-placeholder">
{{contact.photo.value}}
</div>
<div class="contact-name">
{{contact.name}}
</div>
</ion-item>
</ion-list>
How can I avoid this from happening? I want the class to stick.
The solution was to add the class into the data itself.
Related
I created a multi-button screen much like this:
When I click on a button it would have an id and that id I get on its route, I did with list already, but several buttons passing parameter I still can not.
My question is how to pass that button id to another screen.
Avisos.html
<ion-view view-title="Avisos">
<ion-content style="background-color: #FF4500; background-size: cover;
background-position: center;">
<div class="row icon-row">
<div class="col text-center">
<button class="botao button button-positive" id="1">Icon</button>
<br>mais informaçoes
</div>
<div class="col text-center">
<button class="botao button button-positive" id="2">Icon</button>
<br>Avisos
</div>
<div class="col text-center ">
<button class="botao button button-positive" id="3">Icon</button>
<br>Contato
</div>
</div>
</ion-content>
</ion-view>
In that part is where I get the id, How can I get in that part the id of the chosen button? And pass it on side.id?
site.html
<ion-view view-title="Site">
<ion-content>
<ion-list>
<ion-item ng-repeat="site in sites" href="#/app/conteudoDoSite/{{site.id}}">
<span ng-bind-html="site.title"></span><span class="badge badge-assertive">{{site.post_count}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
How to pass parameter to another screen with ionic1 and angular1? Can anybody help me? What I am trying to do is that when the user clicks one of these buttons the id is passed.
I would recommend using ui-sref instead of href in this situation as it allows you to use states instead of paths and also allows you to pass variables to the next view. Here is an example:
<ion-item ng-repeat="site in sites" href="app.conteudoDoSite({id: site.id})">
You also need to make sure that the state you are trying to pass the variable to is configured to receive parameters. Which would look something like this:
.state('app.conteudoDoSite', {
url: '/conteudoDoSite/:id',
templateUrl: '/* Fill in */',
controller: '/* Fill in */'
})
I attempted to guess the state by looking at your code, but please make sure that it is correct, before copying the examples.
I'm using ionic and angularJS in my application, I need to expand and collapse list view. As of now I created the list view using ion-list and ion-item without expand and collapse. Please find the code and snap below.
<ion-view view-title="Call Lists">
<ion-content class="padding">
<ion-list show-delete="false" can-swipe="true">
<div class="list card-ScheduledCalls">
<!-- Task # -->
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="item in callItems" type="item-text-wrap" ng-click="doTask()">
<img ng-src="{{item.imgSrc}}">
<h3>{{item.callCount}}</h3>
<h3>{{item.callDate}}</h3>
<p style="color:white;">{{item.callCmt}}</p>
<p style="color:white;">{{item.callType}}</p>
<p style="color:white;">{{item.assetType}}</p>
<p style="color:white;">{{item.requestedBy}}</p>
<p style="color:white;">{{item.issueType}}</p>
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-view>
Now I have more details in the each list for eg: EmpName, BloodGroup, EmpTodayTaskName, TaskTime, TaskDuration, TaskComments, etc. First I will show only three fields in the list, If a user clicks the more button (mentioned in the image) I will show remaining details.
At the same time, I'm having tapping (ng-click) functionality to go next page so I restrict the user that If they select the more button only to do expand and collapse other touches it will move into next page.
How can I handle this activity in ionic and angular ?
If I understand this correctly, the app needs to go to the next page if the content inside of the ion-item is clicked. If so, why not to wrap ion-item content inside some container, for example div, and attach the required ng-click there
this works but it can't scroll down to the very bottom. I have home button at the bottom and and few items are blocked by it and won't scroll up. home button is in footer in the main page and not on the same controller. how do I make sure I see all picture at the bottom. appreciated for any advice.
<ion-scroll direction='y' zooming='true' style="height: 1024px">
<div class="favorites list item item-text-wrap" ng-repeat="photo in favorites">
<a class="item item-thumbnail-left" href="#">
<img src="sourceURL</p>
</a>
</div>
</ion-scroll>
I think the better way is use <ion-content>, this was designed for scrolling as well. But it has some class that help us detect the bottom and top margin like has-footer or has-sub-footer. This won't need to specify an exact height value by style attribute too.
For <ion-content> you can do like this:
<ion-content direction="y" class="has-footer" <!-- has-bouncing="true" --> >
<div class="favorites list item item-text-wrap" ng-repeat="photo in favorites">
<a class="item item-thumbnail-left" href="#">
<img src="sourceURL"</p>
</a>
</div>
</ion-content>
Like the example above, I added has-footer class, it will automatically push the main content up for you, all the content will be shown as you expected. You can also put the has-bouncing="true" attribute like <ion-scroll>
<ion-view cache-view="false">
<div class="navbar-fixed-top navbar-header bar bar-header " ng-if="showHeader">
<div class="container row">
<div>
<a class="navbar-brand" href="#">
<h1>ROCK 'N' GRILL<br>
<span>Pitampura New Delhi...</span></h1>
</a>
</div>
{{showSubHeader}}
<div ng-if="showSubHeader===true" class="topPull" draggable >
<button ng-if="showSubHeader" class="button-icon"><img src="img/topImg.jpg"></button>
</div>
</div>
</div>
</ion-view>
The value of showSubHeader changes to false but yet I see the div in my view. How do I update view to not show the div when the value is false?
Edit:
This is veiw attached to an abstract state so I believe , the abstract state is not updated when views are switched. How do I reload header when views change or switch?
Instead of using ng-if you could use ng-show. So when showSubHeader is false, your div won't be shown. Have a look here: https://docs.angularjs.org/api/ng/directive/ngShow
first off, i have links from a json and display it using ng-repeat and i want to know if its best practise to load all object property (in a div) corresponding to its link and hide it so when you click a link, the corresponding div shows.
I'm thinking about the worst case scenario, were we have about a 100 links and the load all corresponding divs and hide it o_O
So this is my html:
<a href="">
<div ng-model="showModal" class="contentItem" ng-repeat='meal in recipes | filter:searchText' ng-style="{'background-image':'url({{ meal.url }})'}">
<span id="contentItemHeader">{{ meal.title }}</span>
<span id="contentItemLevel">{{ meal.level }}</span>
</div>
</a>
This is the div (modal) i want to display in full screen:
<div ng-show="showModal" ng-repeat='meal in recipes'>
<span>{{ meal.url }}</span>
<span>{{ meal.method }}</span>
<span>{{ meal.ingredients }}</span>
</div>
Use case is:
-all links loads
-click a link
-corresponding div shows
Thats it ! just like when you see a list of videos on youtube, you click one, then the video page opens but as a modal (same page)
Thanks alot,
regards
You can utilize $modal service from the UI Bootstrap, define template for meal's modal and attach ng-click handler on each individual meal in ng-repeat. In click handle you can open modal and pass meal instance to modal's scope:
View:
<div ng-repeat='meal in recipes' ng-click='selectMeal(meal)'>
{{meal.title}}
</div>
Conrtoller:
$scope.selectMeal = function(meal) {
var dialogScope = $scope.$new(true);
dialogScope.meal = meal;
var modalInstannce = $modal.open({
templateUrl: 'meal-dialog.html',
scope: dialogScope
});
};
Modal template:
<div class="modal-header">
<h3 class="modal-title">{{ meal.title }}</h3>
</div>
<div class="modal-body">
<div>{{ meal.url }}</div>
<div>{{ meal.method }}</div>
<hr />
<h4>Ingridients</h4>
<ul >
<li ng-repeat='ingridient in meal.ingridients' >{{ingridient.name}} : {{ingridient.amount}}</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$close()">Close</button>
</div>
Plunker here
To show div in question, when meal selected, introduce new selectedMeal property in $scope and use it in modal template, remove ng-repeat from modal div and set selectedMeal and showModal in selectMeal function:
$scope.selectMeal = function(meal) {
$scope.selectedMeal = meal;
$scope.showModal = true;
};
<div ng-show="showModal" >
<span>{{ selectedMeal.url }}</span>
<span>{{ selectedMeal.method }}</span>
<span>{{ selectedMeal.ingredients }}</span>
</div>
if your worried about performance of having all the divs exist, but hidden, consider using ng-if instead of ng-show. ng-if does not create the dom element if the expression is false.
<div ng-if="expression">
//element exists if 'expression' is true
</div>
if you are ok to ahead with angular-ui then i think the accordian fits the requirement perfectly... [here's the link for angular-ui's the accordian] directive 1
angular-ui is the pure angularjs implementation of all twitter bootstrap components.
<accordion close-others="oneAtATime">
<accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</accordion-group>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</accordion-group>
</accordian>
you can have either one or all user selected link detail section open at a time...