Code:
<!--searchbar-->
<label class="item item-input" id="winzer-search3">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="search" placeholder="">
</label>
<!--Spacer-->
<div class="spacer" style="width: 300px; height: 24px;"></div>
<!--Wine List-->
<ion-list id="weine-list6" class="manual-list-fullwidth">
<ion-item ng-repeat="wine in WinesOfEvent | filter:search" class="item-icon-right" id="weine-list-item28" ui-sref="winetastic.weinDetails" ng-click="setWine(wine)">
<i class="icon ion-ios-wineglass"></i>{{wine.wineyear}}
</ion-item>
</ion-list>
Everytime when I want to search after things I get a very weird list back.
Here are some examples
It doesn't search when I put only one number in the searchbar.
This should give me an empty list.
I can even search after letters and get results.
Whats wrong with my code?
WinesOfEvent looks like this:
[{"id":"eebedd09-a64c-43ac-80e8-2c8b54fdea1d","qualitylevel":"DAC","wineyear":2013,"region_description":" ","winzer_ID":"458a5050-5256-47b6-9986-397df3d26eb3","winetype_ID":"18e9da94-2795-46d2-a321-8620094a0be9","winetypename":"Cabernet"},{"id":"1b03e718-ee01-4297-9425-411c9716377c","qualitylevel":" ","wineyear":2012,"region_description":" ","winzer_ID":"458a5050-5256-47b6-9986-397df3d26eb3","winetype_ID":"ef2007cf-f776-484b-9829-883747d951b8","winetypename":"Steinberg"},{"id":"0a9bb7aa-f23c-487f-9848-9307e426fec6","qualitylevel":" ","wineyear":2014,"region_description":" ","winzer_ID":"458a5050-5256-47b6-9986-397df3d26eb3","winetype_ID":"c54fea22-8111-4cfc-bdd9-64298d6c7f54","winetypename":"Zweigelt"},{"id":"9318c4f2-650a-4209-8a7e-d0d49e1d3be3","qualitylevel":"","wineyear":2011,"region_description":"Diabas","winzer_ID":"458a5050-5256-47b6-9986-397df3d26eb3","winetype_ID":"637b193c-d57f-479a-86d1-4dcb5bce6de4","winetypename":"Blaufränkisch"},{"id":"c34a87f2-2ce6-4f9a-88e8-b7beec8f2245","qualitylevel":"DAC Reserve","wineyear":2013,"region_description":" ","winzer_ID":"458a5050-5256-47b6-9986-397df3d26eb3","winetype_ID":"637b193c-d57f-479a-86d1-4dcb5bce6de4","winetypename":"Blaufränkisch"},{"id":"8af68c20-9e53-4e78-8f64-3a59bd8d9ff0","qualitylevel":" ","wineyear":2012,"region_description":" Merlot","winzer_ID":"458a5050-5256-47b6-9986-397df3d26eb3","winetype_ID":"c54fea22-8111-4cfc-bdd9-64298d6c7f54","winetypename":"Zweigelt"},{"id":"bdc1442f-7abf-4fe8-99bf-0e3df8ecd0db","qualitylevel":"","wineyear":2012,"region_description":"Diabas","winzer_ID":"458a5050-5256-47b6-9986-397df3d26eb3","winetype_ID":"18e9da94-2795-46d2-a321-8620094a0be9","winetypename":"Cabernet"}]
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 have a search field at the top, which is just a filter, like this:
<div class="bar bar-subheader bar-light">
<label class="item item-input item-floating-label">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" size="100" ng-model="q" placeholder="Search" ng-submit="closeKeyboard()" />
</label>
With the filter picking up the ng-model = "q" and filtering on:
<div class="card" ng-repeat="item in ofertass | filter:q | orderBy:someModel | unique: 'cadastra_oferta_cod_oferta'" ng-init="$last ? fireEvent() : null">
That works very well, but the client wants that, when he clicks the "Go" or "OK" button of the keyboard, it closes. How can I do this?
This filter is already filtering automatically.
i want to remove the border around the ionic-toggle
<ion-content ng-init="checkarrivee.getAllListeCriteres();">
<div class="swipe" on-swipe-left="warn('Must use scope')">Swipe div</div>
<div class="list" style="width: 95%;margin-left: 2%">
<span us-spinner="{color: 'blue', radius:30, width:8, length: 16}" spinner-key="spinner-0"></span>
<label class="item item-input item-stacked-label">
<span class="input-label">Mission en cours :</span>
<input ion-autocomplete name="vehicule" type="text" readonly="readonly" class="ion-autocomplete"
items-clicked-method="itemsClicked(callback)"
items-removed-method="itemsRemoved(callback)"
placeholder="Séléctionner une mission"
items-method="getMissionEnCours(query)"
external-model="initialCountry"
item-view-value-key="codeDeFicheDeMission"
items-method-value-key="items"
max-selected-items="1"
autocomplete="off"
ng-model="checkarrivee.ficheDeMission"
required/>
</label>
</div>
<ion-list ng-repeat="(key,value) in checkload | groupBy:'Niveau'">
<div class="item item-divider" >{{key}}</div>
<ion-item on-swipe-left="warn('Must use scope')" ng-repeat="var in value" >
<ion-toggle ng-model='checkarrivee.boo[var.id]' ng-click="checkarrivee.isMissionSelected(var.id,checkarrivee.ficheDeMission.id)" toggle-class="toggle-positive">{{var.designation}}</ion-toggle>
<button class="button button-clear icon ion-star button-assertive"
ng-click="toggleStar(var)" ng-show="var.star">
</button>
<ion-option-button class="button-dark" >
<i class="icon ion-star"></i>
</ion-option-button>
</ion-item>
</ion-list>
image:
If you do not want the border to show for the toggle's just add style='border:0;' like this:
<ion-toggle style="border:0;" ng-model='checkarrivee.boo[var.id]' ng-click="checkarrivee.isMissionSelected(var.id,checkarrivee.ficheDeMission.id)" toggle-class="toggle-positive">{{var.designation}}</ion-toggle>
But I would suggest not using inline CSS, and instead adding all styling to your css/scss file as it will become much more difficult to maintain as the project scales.
EDIT:
For the CSS it will be something like this .list .item .noToggleBorder{border:0;}
Here's a codepen for you to check it out.
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>
I have found a really strange issue with my ionic form, basically I have a single input that is no different from any of the others but if the content is longer than the input box, it seems to disappear but appear with a few actions (see GIF)
Has anyone seen this before?
Code which powers the forms,
<ion-view>
<ion-content class="padding" style="padding-top: 0px;" scroll="true" has-bouncing="true">
<ion-refresher class="primary-color" pulling-text="Refresh" on-refresh="vm.update();" spinner="none">
</ion-refresher>
<div class="group-list list list-inset" style="padding: 14x;">
<label ng-repeat="field in vm.model.Fields | filter: vm.fieldFilter" class="item item-input editor-field">
<span class="input-label font-thin">{{field.Name}}</span>
<input type="text" class="primary-color" placeholder="{{field.Editor === 'readonly' ? 'Readonly' : 'Update'}}"
ng-class="{readonly: field.Editor === 'readonly'}"
ng-model="field.Value"
ng-click="vm.editorFor(field)"
ng-disabled="field.Editor === 'readonly'"/>
</label>
</div>
</ion-content>
</ion-view>