I write this code for add contact to group.
how i make line by line checkbox?
this is in line checkbox list.
<ion-list>
<ion-item ng-repeat="employee in employees" >
<label class="checkbox">
<input ng-model="checkGroups[employee.id]" type="checkbox">
</label>
{{employee.name}}
</ion-item>
</ion-list>
<ion-list>
<ion-item ng-repeat="employee in employees track by $index ">
<label class="checkbox">
<input name={{$index}} ng-model="checkGroups[employee.id]" type="checkbox">
</label>
{{employee.name}}
</ion-item>
</ion-list>
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
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"}]
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 a collection-repeat element with lots of data on the view and I want to change its sorting when I select an option from the element. Although it assigns the correct value to the $scope.isAscending variable, collection-repeat list is not updating.
<ion-view cache-view="false">
<ion-content on-scroll="onContentScroll()">
<div class="list">
<label class="item item-input item-select item-light">
<div class="input-label">
Sorting:
</div>
<select ng-model="selectField" ng-change="chooseSorting(selectField)">
<option value="true">ascending</option>
<option value="false">descending</option>
</select>
</label>
<label class="item item-input">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="q">
</label>
</div>
<div collection-repeat="item in items | orderBy: item.year: !isAscending | itemFilter: q | groupByProperty" divider-collection-repeat>
<ion-item class="item item-thumbnail-left item-button-right">
<a class="item-thumbnail-left" ng-click="openModal(item)">
<h3>{{item.name}}</h3>
<p>{{item.properties[0]}}</p>
<p>{{item.properties[3]}}</p>
</a>
</ion-item>
</div>
</ion-content>
</ion-view>
I tried to call $scope.$apply(function(){$scope.isAscending = value}) after the option was specified, It updates the scope value, but it doesn't refresh the repeating list, $state.go() doesn't work either.
Is there a way to refresh collection-repeat list ?
If I understood your question well, you want to filter the year based on select changes, right?
If so, first you don't need to use ng-change and second orderBy filter just needs the property (in your case year).
Change your select to:
<select ng-model="selectField">
<option value="">ascending</option>
<option value="false">descending</option>
</select>
Change your repeat to:
<div collection-repeat="item in items | orderBy: year: selectField | itemFilter: q | groupByProperty" divider-collection-repeat>
Take a look on docs of orderBy filter.
I am calling data from a web service and want to display the data in two ways. the first way is through a select/dropdown list which I have already done and it is working. The other way is to display it with an ion-item as a list, I have used the same coding for both so it should work. I have no errors and and the data for the ion-item does show in my console log so this tells me it is an issue of displaying it in html.
HTML:
Select/Dropdown:
<label class="item item-input item-select">
<div class="input-label">
Quote:
</div>
<select ng-model="selectedrep1" ng-init="selectedrep1()" ng-change="TruckData(selectedrep1)" ng-options="rep1.QuoteNumber for rep1 in rep1s">
<option value=""></option>
<option selected>Select</option>
</select>
</label>
Ion-Item
<ion-list ng-model="selectedtruck1" ng-options="truck1.TrucksName for truck1 in truck1s">
<ion-item class="item-stable" ng-value="">
</ion-item>
Use ng-repeat in ionlist, detailed example is given here
<ion-list >
<ion-item ng-repeat="truck1 in truck1s"
<h2>{{truck1.TrucksName}}</h2>
</ion-item>
</ion-list>