I have problem with ng-repeat when i search for a car its done but i delete the name i searched for the cars doesn't back to the view this is my html:
<ion-content lazy-scroll ng-class="{expanded:isExpanded}">
<div class="item-input-inset bar-light">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="query" placeholder="Search">
</label>
</div class="content has-header">
<div>
<div class="list animate-fade-slide-in-right">
<a class="item item-thumbnail-left item-icon-right" ng-repeat='item in voitures[0] | filter: query' ng-model="data" ng-click="getID(item)" ui-sref="app.detailsVoiture({Id: item.idVoiture})">
<img image-lazy-src="img/{{item.photo}}.jpg" image-lazy-loader="android" image-lazy-distance-from-bottom-to-load="-200" image-lazy-distance-from-right-to-load="-200">
<h2 class="border-top" style="color:blue;">{{item.Modele.marque}} {{item.Modele.nom}}</h2>
<p >{{item.categorie}}</p>
<i class="icon ion-pricetag energized-900">{{item.prixLocation}}</i>
</a>
</div>
</div>
</ion-content>
Related
I'm getting some posts to my ionic app via JSON data , and I'm filetering the posts receipts with a searchbar input , the problem that the search bar input and the filetered results are showing in the same page , I want to show the result in another page , and the first page will be only for the search bar .
(I added the new page and I'll add a button for the search page
)
This is my code :
<label class="item item-input">
<input type="text" placeholder="Nom du Jneyne" ng-model="nom" ng-
change="showSelectValue(nom)">
</label>
<ion-item class="item item-thumbnail-left item-text-wrap item-icon-right"
ng-repeat="post in (filteredItems = ( recent_posts
| filter:{title:nom} " href="#/main/postDetail/{{post.id}}">
<img ng-src="{{post.thumbnail}}" />
<h2>{{post.title}}</h2>
<p ng-bind-html="post.excerpt" </p>
<ion-option-button class="button-dark">
<i class="icon ion-heart"></i>
</ion-option-button>
</ion-item>
</ion-list>
try adding ng-if and change code as
<label class="item item-input" ng-if="srhItem">
<input type="text" placeholder="Nom du Jneyne" ng-model="nom" >
<input type ="submit" value="search" ng-click="showSelectValue(nom)">
</label>
and your display part to
<div ng-if = displayResult>
<ion-item class="item item-thumbnail-left item-text-wrap item-icon-right"
ng-repeat="post in (filteredItems = ( recent_posts
| filter:{title:nom} " href="#/main/postDetail/{{post.id}}">
<img ng-src="{{post.thumbnail}}" />
<h2>{{post.title}}</h2>
<p ng-bind-html="post.excerpt" </p>
<ion-option-button class="button-dark">
<i class="icon ion-heart"></i>
</ion-option-button>
</ion-item>
</div>
and add $scope.srhItem = false,$scope.displayResult = true in your showSelectValue() function.and dont forget to add $scope.srhItem = true at the beginning of your controller
I want to perform a search on json and display it on screen
Check out this plunk i made.Can someone tell me how can i perform a search and display on screen and use that data .
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</div>
I forked your plunker here but in case you don't get it you need to add ng-model in your search bar so change this line to
<input type="text" placeholder="Search" ng-model='query'>
And then in your ng-repeat do:
<article ng-repeat="object in yifito | filter : query">
And it works, I just checked (and forked)
Add ng-model to the input field and filter the ng-repeat using the function
<ion-content>
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="search">
</label>
</div>
<section class="list">
<article ng-repeat="object in yifito|filter:myfilter ">
<a href="{{object.url}}" target="_system" onclick="window.open('{{object.url}}',_system,'location=yes')" class="item">
<img ng-src="{{object.medium_cover_image}}">
<h2 class="noWhiteSpace">{{object.title}}</h2>
<p class="noWhiteSpace">{{object.genres}}</p>
<p class="noWhiteSpace">Year {{object.year}} Rating {{object.rating}}</p>
</div>
</a>
</article>
</section>
</ion-content>
Myfilter function logic in js file
$scope.myfilter = function(obj) {
var val = true;
if($scope.search && !obj.title ||
$scope.search && !obj.Rating ||
$scope.search && !obj.year
) {
val = false;
}
return val;
}
Issue: I have a simple add item form that adds a picture from the phone's album in a view. For some reason, after adding ion-content scroll="true", the page still doesn't allow for scrolling.
Also, I've set $ionicScrollDelegate to refresh in the controller. Thanks!
<ion-view title="Add Item">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-content scroll="true">
<!-- <ion-scroll direction="y" style="height: 800px;"> -->
<ion-pane>
<div class="row">
<div class="col text-center">
<button class="button button-calm" ng-click="getPhoto()"><i class="ion-camera"></i> Select Photo</button>
</div>
</div>
<div class="list card" ng-show="item.pic">
<div class="item">
<img class="full-image" src="data:image/jpg;base64,{{item.pic}}">
</div>
</div>
<form ng-submit="submitItem()" name="newItemForm" novalidate>
<label class="item item-input">
<span class="input-label" type="text">* Designer: </span>
<input type="text" ng-model="item.designer" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Type/Collection: </span>
<input type="text" ng-model="item.collection" ng-required="true">
</label>
<p ng-show="newItemForm.item.collection.$error.required">Type/Collection Required</p>
<label class="item item-input">
<span class="input-label" type="text">* Color: </span>
<input type="text" ng-model="item.color" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Size: </span>
<input type="text" ng-model="item.size" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">Material: </span>
<input type="text" ng-model="item.material">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Condition: </span>
<input type="text" ng-model="item.condition" ng-required="true">
</label>
<label class="item item-input">
<span class="input-label" type="text">* Description: </span>
<textarea type="text" ng-model="item.description" ng-required="true"></textarea>
</label>
<p ng-show="newItemForm.$invalid" class="warning">*Items must be filled in to Add Item</p>
<div class="row">
<div class="col text-center">
<button type="submit" class="button button-balanced" ng-disabled="newItemForm.$invalid"><i class="ion-plus"></i> Add Item</button>
</div>
</div>
</form>
</ion-pane>
<!-- </ion-scroll> -->
</ion-content>
</ion-view>
I am following the following link to get angular animations working in the app:
http://angularanimation.ya.com.tr/start.html
I have animate.css in my css folder and link to it in index.html.
Also, I have ngAnimate as a dependent module in app.js
I tried to use an animation in my html:
<ion-view class="slide-from-top">
<ion-content>
<div class="contentArea">
<form action="#">
<div class="row">
<label>The Italian Melt</label>
<input class="field" type="text" value="160.00">
<input class="number" type="text" value="1">
<i class="fa fa-plus-circle"></i>
<i class="fa fa-minus-circle"></i>
</div>
<div class="row">
<label>The Italian Melt</label>
<input class="field" type="text" value="160.00">
<input class="number" type="text" value="1">
<i class="fa fa-plus-circle"></i>
<i class="fa fa-minus-circle"></i>
</div>
<div class="row">
<label>The Italian Melt</label>
<input class="field" type="text" value="160.00">
<input class="number" type="text" value="1">
<i class="fa fa-plus-circle"></i>
<i class="fa fa-minus-circle"></i>
</div>
<hr>
<div class="row text">
<div class="col-33">Subtotal</div>
<div class="col-75">Rs. 210.00</div>
</div>
<div class="row text">
<div class="col-33 blueText">Discount</div>
<div class="col-75 blueText">Rs. 42.00</div>
</div>
<div class="row text">
<div class="col-33">Delivery Fee</div>
<div class="col-75">Rs. 10.00</div>
</div>
<hr>
<div class="row text">Total will refund off</div></br>
<div class="row text">
<div class="col-33 totalBig">Total</div>
<div class="col-75 totalBig">Rs. 178.00</div>
</div>
<hr>
<form action="#">
<div class="customRow">
<div class="row coupon">
<label>Coupon</label>
<input class="couponField" type="text">
<button class="applyBtn">Apply</button>
</div>
</div>
</form>
<p class="row redText">Minimum Order : Rs. 500/-</p>
</div>
<button class="button-checkout">Proceed to Checkout <i class="fa fa-shopping-cart"></i> >></button>
</ion-content>
</ion-view>
Infact, when I go to console,
I see this:
How do I get it working?
Pleas check https://daneden.github.io/animate.css/
Dynamic Animation
You have to call animation function like
<ion-view class="myAnimation">
<ion-content>
....
</ion-content>
</ion-view>
and add class when page is loaded
$('#myAnimation').addClass('animated shake');
and after animation finish you have to remove class which is added to div so again animation works without refresh page. for that you have to do that
$('#myAnimation').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', removeClass);
function removeClass()
{
$('#myAnimation').removeClass('animated shake');
}
This way is dynamic but you can also set as static in html like
Static
<ion-view class="animated shake">
<ion-content>
....
</ion-content>
</ion-view>
I am using radio buttons in a popover to create a dropdown type filter for my app.
When I use an iPad the radio buttons go haywire! This works perfectly on every other device.
Best illustration is in this video
https://www.youtube.com/watch?v=Begkz4uS8hQ
Here is my code:
<script id="templates/popover.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="item bar-header bar-positive">
<h2 class="title">Difficulty</h2>
</div>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="" name="group">
<div class="item-content">
All
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Easy" name="group">
<div class="item-content">
Easy
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Medium" name="group">
<div class="item-content">
Medium
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Hard" name="group">
<div class="item-content">
Hard
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Expert" name="group">
<div class="item-content">
Expert
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</ion-content>
</ion-popover-view>
</script>
And displayed using this:
<button class="button button-positive button-small col col-20 icon-left ion-connection-bars filter-button" ng-click="popover.show($event)">
{{filter.difficulty || 'All'}}
</button>
Many thanks to anyone who can help.