I am looking to display an overview of each widget category to appear above the filtered results when that widget category is selected.
I am assuming this will require a ng-show directive so will perhaps require some controller code too. But any pointers on linking up select dropdown with my ng-repeat and linking up with ng-show would be great.
Here is what I am aiming for:
Before
After
<ion-view title="Select Box Filter" id="page6" class=" ">
<ion-content padding="true" class="has-header">
<ion-list id="tListSelectFilter-list11" class=" ">
<label class="item item-select " id="tListSelectFilter-select1">
<span class="input-label">Select</span>
<select></select>
</label>
<ion-item id="tListSelectFilter-list-item25" class=" ">Widget Range 1</ion-item>
<ion-item id="tListSelectFilter-list-item26" class=" ">Widget Range 2</ion-item>
<ion-item id="tListSelectFilter-list-item27" class=" ">Widget Range 3</ion-item>
</ion-list>
<ion-item ng-repeat="product in products | filter:select" class="item-thumbnail-left item-text-wrap"
href="#/tab/list/{{product.item}}">
<h2>Product Name: {{product.name}}</h2>
<h3>Quantity: {{product.quantity}}</h3>
<h2>Price: £{{product.price}}</h2>
</ion-item>
</ion-content>
</ion-view>
<!--Widget Range 1 Overview Text - Here is an example of the overview text for Widget Range 1 to be produced when this specific dropdown is selected.
Widget Range 2 Overview Text - Here is an example of the overview text for Widget Range 2 to be produced when this specific dropdown is selected.
Widget Range 3 Overview Text - Here is an example of the overview text for Widget Range 3 to be produced when this specific dropdown is selected.-->
https://plnkr.co/edit/0WrinKY2X7Ijq32hBzms
Here would be your ng-repeat
<span>{{description}}</span>
<ion-item ng-repeat="product in products | filter:select"
class="item-thumbnail-left item-text-wrap" ng-click="showDescription(product)" >
<h2>Product Name: {{product.name}}</h2>
<h3>Quantity: {{product.quantity}}</h3>
<h2>Price: £{{product.price}}</h2>
</ion-item>
This would be inside the controller
// description initialized to nothing
$scope.description = '';
$scope.showDescription = function(product) {
$scope.description = product.description;
}
Now this assumes that the description for each product is apart of the product object - just as the name, quantity, and price.
I would create json object array for categories as
$scope.categories = [
{"name":"Category 1", "description": "This is description of category1"}
{"name":"Category 2", "description": "This is description of category2"}
{"name":"Category 3", "description": "This is description of category1"}
]
I will bing this array to create the category list.
<ion-list id="tListSelectFilter-list11" class=" ">
<label class="item item-select " id="tListSelectFilter-select1">
<span class="input-label">Select</span>
<select></select>
</label>
<ion-item id="tListSelectFilter-list-item25" class=" " ng-repeat="c in categories" ng-model="selected.category">
{{c.name}}
</ion-item>
</ion-list>
<span>{{selected.category.description || ""}}</span>
This is how you can do it.
Keep your data as json obj array in controller. This will contain : Select item names and related descriptions.
Keep a place holder in controller for the currently selected option, you can use this too display the information on your page within the controller scope.
P.S : I have done it in simple HTML to show how this can be achieved. In case of any doubts do comment.
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function() {
this.selected = "";
this.data = [{
"name": "Widget 1",
"desc": "Here is an example of the overview text for Widget Range 1 to be produced when this specific dropdown is selected."
}, {
"name": "Widget 2",
"desc": "Here is an example of the overview text for Widget Range 2 to be produced when this specific dropdown is selected."
}, {
"name": "Widget 3",
"desc": "Here is an example of the overview text for Widget Range 3 to be produced when this specific dropdown is selected."
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl as ctrl">
<select ng-model="ctrl.selected" ng-options="widget.name for widget in ctrl.data">
<option value="">Please select</option>
</select>
<div>{{ctrl.selected.desc}}</div>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</div>
Related
I'm using Angular 2 in my project,and I have this json object:
[
{
"city": "toto"
},
{
"city": "titi"
},
{
"city": "tata"
},
...
]
What I want is, to populate this object in the UI like this:
toto -> titi (with a button here)
titi -> tata (with a button here)
I tried this but it doesn't work:
<div formArrayName="prices">
<div *ngFor="let myGroup of myForm.controls.prices.controls; let i=index">
<div [formGroupName]="i">
<span *ngIf="myForm.controls.prices.controls.length > 1" >
</span>
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control" >
</div>
</div>
Any suggestions please?
Something like this?
<div *ngFor="let item of items; let i=index">
<span>{{item.city}}</span> --> <span *ngIf="items[i+1]">{{items[i+1].city}}</span>
</div>
outputs:
toto --> titi
titi --> tata
tata -->
If you want to not show the last item use let last = last and filter out the last item.
<div *ngFor="let item of items; let i=index; let last = last">
<div *ngIf="!last">
<span>{{item.city}}</span> --> <span *ngIf="items[i+1]">{{items[i+1].city}}</span>
</div>
</div>
I'm trying to display a list inside a list. This loop works in JavaScript.
for ( i=0; self.InsuredCommoditiesList.length > i; i++){
self.CommoditiesCategories = self.InsuredCommoditiesList[i].Category;
for (j = 0; self.InsuredCommoditiesList[i].Items.length > j; j++) {
self.CommoditiesList = self.InsuredCommoditiesList[i].Items[j];
}
This is the body of my ng-repeat
<label ng-repeat="commo in QQCtrl.InsuredCommoditiesList track by $index">
{{commo.Category}}
<input type="checkbox"> {{commo.Items}}
</label>
And my result is almost correct, the problem is that "Items" are not being display individually. Instead it's just showing the whole array.
Example in the following picture:
Can I use something similar to position "j" in my ng-repeat to display the items individually?
The items in each list can be displayed using a list, for example: an unordered list (i.e. <ul>) or an ordered list (i.e. <ol>), with a list item (i.e. <li>) for each item in the array. In the example below, item is analogous to self.InsuredCommoditiesList[i].Items[j] in the for loop of the regular JavaScript example.
<ul>
<li ng-repeat="item in commo.Items">{{item}}</li>
</ul>
In fact, there is a repeat_expression1 where j could be used in a similar manner: (key, value) in expression, which would look like below:
<li ng-repeat="(j,item) in commo.Items">{{item}}</li>
A <label> is only permitted to only contain Phrasing content2 but the lists are Flow Content so move the ngRepeat up to another parent element like a <div> or a <span>. Then make the label, input and list tags child elements.
<div ng-repeat="commo in QQCtrl.InsuredCommoditiesList track by $index">
<label for="checkbox_{{$index}}">{{commo.Category}}</label>
<input type="checkbox" id="checkbox_{{$index}}">
<ul>
<li ng-repeat="item in commo.Items">{{item}}</li>
</ul>
</div>
See a demonstration of this below.
angular.module('QQapp', [])
.controller('ctrl', function($scope) {
this.InsuredCommoditiesList = [{
"id": 3,
"Category": "Agricultural liquids - Petroleum",
"Items": ["100% Produce", "Alcohol", "Appliances"]
},
{
"id": 4,
"Category": "Grocery Items (dry)",
"Items": ["Candy", "Canned goods", "Containers"]
},
{
"id": 6,
"Category": "Building materials",
"Items": ["Alfalfa", "All Non-perishable General Merchandise", "Almonds"]
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="QQapp" ng-controller="ctrl as QQCtrl">
<span ng-repeat="commo in QQCtrl.InsuredCommoditiesList track by $index">
<label for="checkbox_{{$index}}">{{commo.Category}}</label>
<input type="checkbox" id="checkbox_{{$index}}">
<ul>
<li ng-repeat="(j,item) in commo.Items" id="{{commo.id}}_{{j}}" >{{item}}</li>
</ul>
</span>
</div>
1 refer to the Arguments section of ngRepeat for supported formats
2https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
You need to replace the inner loop of your equivalent javascript code in angularjs as well, i.e. you will need one more ng-repeat.
Something like:
<label ng-repeat="commo in QQCtrl.InsuredCommoditiesList track by $index">
{{commo.Category}}
<input type="checkbox" ng-repeat="item in commo.Items"> {{item}}
</label>
You have two loops in your JavaScript code, so you will need two loops in the angular to go through the inner list.
<label ng-repeat="commo in QQCtrl.InsuredCommoditiesList track by $index">
{{commo.Category}}
<input type="checkbox">
<label ng-repeat="item in commo.Items" >{{item}}</label>
</label>
Untested, but should work assuming commo.Items is a list of strings
You may try for this:
<label ng-repeat="commo in QQCtrl.InsuredCommoditiesList track by $index">
{{commo[0].Category}}
<input type="checkbox"> {{commo[0].Items}}
</label>
I have a dropdown select with some options to filter the displayed list according to the selected option.
<form class="list">
<label class="item item-select">
<span class="input-label">Select career</span>
<select ng-model="searchFromSelect">
<option></option>
<option>Admin</option>
<option>IT</option>
<option>Transport</option>
</select>
</label>
<ion-item ng-repeat="career in careers | filter:searchFromSelect" class="item-icon-right balanced" ng-click="openCareer(career)">{{ career.AREA }}
<i class="icon ion-ios-arrow-right"></i>
</ion-item>
</form>
controller
$scope.vagas = response.data;
console.log : {"data":[{"ID":"1","AREA":"Admin","Benefits":"Transport"},{"ID":"2","AREA":"IT","Benefits":"Transport"}]}
How can I make it more accurate to show me the list items according only to "AREA"?
Note that if I choose Transport, it displays both "Admin" and "IT" because "Transport" is a benefit from them.
I was trying to use "strict" like here but it did not work.
According to the filter filter documentation, you can specify your filter expression as an object. To filter only on AREA properties, use :
ng-repeat="career in `careers| filter:{AREA: searchFromSelect}"
I have a Ionic app with Angular JS. I have a Dynamic checkbox list which is called from an array in app.js. I have it so that when a user clicks on a checkbox, the list above gets updated with their choice, what I want is for the choice to get put into another view not another div i.e tab 1 = List, tab - 2 = choices. The code is:
$scope.myList = [
{name:'Choice one'},
{name:'Choice two)'}
];
$scope.myChoices = [];
$scope.stateChanged = function(checked,indx){
var item = $scope.myList[indx];
if(checked){
$scope.myChoices.push(item);
}else{
var index = $scope.myChoices.indexOf(item);
$scope.myChoices.splice(index,1);
}
}
html:
<div>
<div class="item item-dark item-icon-right">
My Choices
</div>
<ul class="list" >
<li class="item" ng-repeat='item in myChoices'>
<p>{{item.name}}</p>
</li>
</ul>
<div class="item item-dark item-icon-right">
University list
</div>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="search">
</label>
<button class="button ion-close-circled input-button button-small"
ng-click="search = ''" ng-show="search.length">
Clear search
</button>
</div>
<ul class="list" >
<li class="item item-checkbox" ng-repeat='item in myList | filter: search'>
<label class="checkbox">
<input type="checkbox" ng-model="checked" ng-change='stateChanged(checked,$index)'>
</label>
<p>{{item.name}}</p>
</li>
</ul>
</div>
Tabs:
<ion-tabs class="tabs-icon-top tabs-dark">
<ion-tab title ="List" icon-on="home" icon-off="home" href="#/tab/list">
<ion-nav-view name="list-tab"></ion-nav-view></ion-tab>
<ion-tab title ="My choices" icon-on="choices" icon-off="choices" href="#/tab/choice">
<ion-nav-view name="choice-tab"></ion-nav-view></ion-tab>
</ion-tabs>
When you are trying to send data across multiple views, the easiest way is to store the data in a factory variable. Whenever you need the data, you can get it from the factory with a simple get.
// This module can be in its own javascript file
angular.module('choicesFactory', [])
.factory('choicesFactory', function() {
var choicesStored = [];
return {
storeChoices: function(choices) {
choicesStored = choices;
return;
},
getChoices: function() {
return choicesStored;
},
};
});
Now, to implement this bit of code, all you have to do is include the javascript file after your inclusion of angularjs in your index.html and add choicesFactory to your app dependencies.
When you call the function from your controller, you can say:
.controller('choicesController', [
'$scope',
'$state',
'choicesFactory'
function($scope, $state, choicesFactory) {
// An example with getting the choices
var choices = choicesFactory.getChoices()
}]);
If this doesn't quite make sense, I made a codepen example app that demonstrates all the pieces working together.
Click here to check out the example. :) Happy coding
I am working on a simple products filtering app using Ionic framework.
I have a list of products that I like to filter, and the AngularJS filter model works great except for this weird case: If I scroll down the list and filter most of the search query is missing.
https://apps.ionic.io/app/11bc2ed5
.factory('Recettes', function() {
// Might use a resource here that returns a JSON array
var data = [];
data.recettes = [];
data.produits = [
{
"index": 1,
"isActive": true,
"estAutorise": 0,
"name": "Howard Price",
"marque": "in"
},
{
"index": 2,
"isActive": true,
"estAutorise": 1,
"name": "Ingrid Saunders",
"marque": "amet"
},
...
<ion-view view-title="Dashboard">
<ion-header-bar class="item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Rechercher Un Produit" ng-model="searchText">
</label>
<button class="button button-clear" ng-click="searchText = undefined">
Annuler
</button>
</ion-header-bar>
<ion-content class="padding" >
<div class="list card" ng-repeat="produit in produits | filter:searchText | orderBy: index">
<div ng-switch on="{{produit.estAutorise}}">
<div class="item item-autorise" ng-switch-when="1">
<h2 class="title"><b>{{produit.marque}} </b>{{produit.name}}</h2>
<b class="balanced">Autorisé</b>
....
Here are few images that may describe the issue:
http://imgur.com/JDZXmQz,ucFdCX8,8VYXPAc
[Second Image], I'm typing the search while I am on top of the page, and every thing works fine.
[First Image][tird image] However, when I scroll down the list and insert the same query nothing shows.
I would really appreciate the help, Thank you!
Turned out the filter is working, the problem in the view when I scroll down then filter that part of the screen become empty and the view stay there even if there is nothing to show there. I hope there is calToTop function that shift automatically to the top whenever the query is refreshed.