I am using <ion-select> for drop-down list and it working as expected but what I want here is Index of selected option from <ion-select>
I have used <ion-select> and change event like below:
<ion-select class="myCustomSelect" [(ngModel)]="selectedProductDD" interface="popover" (ionChange)="onSelectChange($event)">
<ion-option *ngFor="let selectedProduct of productArray" [value] = selectedProduct.pid>{{ selectedProduct.pid }} </ion-option>
</ion-select>
Change Event :
onSelectChange(selectedValue: any) {
//Here I want Index also.
//Currently I am getting selected Value.
}
let me know if any can help me on this!
Thanks in advance.
In your *ngFor you can also define a variable to receive que index
<ion-select class="myCustomSelect" [(ngModel)]="selectedProductDD" interface="popover" (ionChange)="onSelectChange($event)">
<!-- you can also have your index by declaring a variable in ngFor that'll receive the index -->
<ion-option *ngFor="let selectedProduct of productArray; let i = index" [value] = selectedProduct.pid>{{ selectedProduct.pid }} </ion-option>
</ion-select>
The case here is that your declared index is inside your ion-select so it's not available for onSelectChange method. So declare a property in your .TS file
public myIndex: number = 0;
And every time a user select an option the property will receive the index
<!-- on selecting an option your myIndex will receive the current selected option index -->
<ion-option *ngFor="let selectedProduct of productArray; let i = index" [value]=selectedProduct.pid (ionSelect)="myIndex = i">{{ selectedProduct.pid }}</ion-option>
Then you can use it in your onSelectChange()
onSelectChange(selectedValue: any) {
let index = this.myIndex;
}
There's another options but this is the most Angular way of doing this. Hope this helps.
Related
this.tribesProvider.getMyTribeDetailsByTriberId().subscribe(tribeIds=>{
tribeIds.forEach(tribeId=>{
this.tribesProvider.getMyTribeDetailsByTribeId(tribeId).subscribe(tribe=>{
this.myTribeList.push(tribe);
console.log(this.myTribeList);
})
})
})
I have to access the array myTribeList from its view like this
<ion-item *ngFor="let tribe of myTribeList">
<ion-list>
<h2>{{tribe.TribeDesc}}</h2>
<h2>{{tribe.TribeName}}</h2>
<h2>{{tribe.Created}}</h2>
<h2>{{tribe.Updated}}</h2>
</ion-list>
</ion-item>
But with the above code its not possible.
Any suggestions?
UPDATE
The issue occurs because i was doing
this.angularFire.database.list
for getMyTribeDetailsByTribeId(tribeId) method
instead of
this.angularFire.database.object
which in turn generated an additional array of objects like
-array
-array
-object
-array
-object
I have a string property with values like "primary", "secondary" or "danger". I am able to bind it to a badge in this way:
<ion-badge class="badge badge-{{product.colorStock}}">1</ion-badge>
But I am not able to do the same with a label (this does NOT work):
<ion-label class="label label-{{product.colorStock}}">Text</ion-label>
How could I bind my property to the label so it changes its color?
Thank you
I think this should work:
<ion-label class="label" [ngClass]="['label-'+product.colorStock]">Text</ion-label>
It was solved by Ionic2 Framework itself, introducing the "color" tag. Now label sintax is:
<ion-label color="danger">Text</ion-label>
So, the problem does not exist anymore.
I am trying to accomplish this using ionic/cordova:
on button press
goes to a new screen with a list
selects an item in the list
and returns to the original with the selected value.
Can someone give directions how to accomplish this and give an example how this is accomplished ? Thanks.
Please provide what you have already tried. However, I understand what you want:
Make sure all your pages/templates are set up inside app.js correctly, have a controller.js, and services.js.
Passing data between controllers is done through services, You can inject the service into each page's controller and using set() and get() methods to change and receive the value(s) accordingly.
HTML (First page):
<ion-view view-title="firstPage">
<ion-content>
<!-- Binds selected value to div -->
<div ng-bind="selected.selec"> </div>
<!-- Goes to next page -->
<button class="button" ng-click="next()">
Next
</button>
</ion-content>
</ion-view>
Controller (First):
.controller('firstPageCtrl', function($scope, $state, savedList) {
// Go to next page
$scope.next = function() { $state.go("secPage"); }
// Get selected value from service, savedList
$scope.selected = { selec: "" };
$scope.selected.selec = savedList.get();
})
HTML (Second Page):
<ion-view view-title="secPage">
<ion-content>
<!-- Radio buttons will only allow one value to be selected at one time -->
<ion-list>
<!-- Pass in value of radio button to update function -->
<ion-radio ng-model="choice" ng-value="'A'" ng-change="update('A')">Choose A</ion-radio>
<ion-radio ng-model="choice" ng-value="'B'" ng-change="update('B')">Choose B</ion-radio>
</ion-list>
<!-- Goes back to first page -->
<button class="button" ng-click="back()">
Go Back
</button>
</ion-content>
</ion-view>
Controller (Second):
.controller('secPageCtrl', function($scope, $state, savedList) {
$scope.back = function() { $state.go("firstPage"); }
// Send selected value to service, savedList
$scope.update = function(selec) {
savedList.set(selec);
}
})
Service:
.factory('savedList', function() {
var selec = "";
// Sets selec to what ever is passed in
function set(data) {
selec = data;
}
// Returns selec
function get() {
return selec;
}
return {
set: set,
get: get
}
})
https://docs.angularjs.org/guide/services
I have the following;
<asp:Repeater runat="server" ID="Repeater">
<ItemTemplate>
<sc:image field="image from droplink" Item='<%# Container.DataItem %>' runat="server" />
</ItemTemplate>
"Image from droplink" is a droplink selected value (a Sitecore content item). Within this item, there is a field "Image" which is the actual media item i want the source of. So the above does not work, as this field just returns the GUID of the content item.
How do I get the image src from the Image field of the droplink selected item in the above repeater?
You'll need to populate the Item or Datasource property on the sc:Image tag with the actual item containing the Image field. Item would be an Item object, whereas Datasource can be an ID or path. I think the following should do it.
<sc:Image runat="server" Field="image field" Datasource="<%# ((Item)Container.DataItem)["droplink field"] %>" />
The following answer assumes that the droplink on the Context Item points to a Media Item. (Prior to questioner clarification). Might be useful for someone else.
You'll need to use an asp:Image and a OnItemDataBound handler in your code behind, and use e.Item.DataItem (where e is RepeaterItemEventArgs) to get the item being bound. Ensure e.ItemType is a ListItemType.Item. From there it will be something like...
var item = (Item)e.Item.DataItem;
var dropLink = new InternalLinkField(item.Fields["image from droplink"]);
var mediaItem = dropLink.TargetItem;
if (mediaItem != null)
{
var options = new MediaOptions { Height = 100, Width = 100 }; //change to your dimensions
var imageUrl = MediaManager.GetMediaUrl(new MediaItem(mediaItem), options);
var imageControl = e.Item.FindControl("myImageControlID"); //change to asp:Image ID
imageControl.ImageUrl = imageUrl;
imageControl.AlternateText = mediaItem.Alt;
}
If you are supporting Page Editor (I hope you are!), within a repeater you can use Edit Frames to allow editing of the image on each item. (Note that the linked example puts an edit frame around a whole ListView, whereas you'll want to place it within your Repeater and databind the Datasource property to the current item ID.)
The input field should be empty on page load.
When the user clicks the 'Edit Post' then I call KO click and 'select' function (all working) .. when I do this call the row selected is bound correctly.
Current code automatically binds on page load so the first record is in the input field.
<div data-bind="with: Selected">
<input type="text" data-bind="value: Name" />
</div>
<i title="Edit Post" data-bind="click: $parent.select"></i>
Example hack
<div data-bind="if **click: $parent.select then** with: Selected">
<input type="text" data-bind="value: Name" />
</div>
<i title="Edit Post" data-bind="click: $parent.select"></i>
How do I write a data-bind if 'click' then do 'with: Select' ?
Update
Add example code: http://jsfiddle.net/uC8Vt/70/
Generally you would just want this to work off of the Selected observable. If it is not populated, then it won't render the area. If it is pooulated, then whatever object that Selected holds will be used.
So, when you call $parent.select you would want to populate Selected with your object.
In fact, observables are functions, so unless you need to run other logic, you can even take a shortcut and bind your click directly against the Selected observable. The current data is passed as the first argument, which sets the value of the observable.
You would change the Selected property depending on the item clicked...
So an example viewModel might be like...
var items = [{ Name: 'item1' }, { Name: 'item2' }];
var viewModel = {
items: items,
Selected: ko.observable(items[0])
}
viewModel.select = function(selectedItem) {
// The first arg is the context of the item clicked
// Selected in an observable
viewModel.Selected(selectedItem);
};
Then, as Selected changes... your Name binding will automatically update.