I am currently taking my first steps in Ionic, and trying to create an app.
In this example, I have 2 radio button lists (with options 1, 2, 3 and options 4, 5, 6):
I would like both radio buttons 2 and 4 to be checked by default.
Why is only radio button 4 checked?
What am I missing?
Code below.
From the model HTML:
<ion-view view-title="Radio button demo">
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Chosen option: {{item}}, {{item2}}</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-radio ng-repeat="i in items" ng-value="i.Id" ng-model="item.itemval" >{{i.Name}}</ion-radio>
</ion-list>
<ion-list>
<ion-radio ng-repeat="i in items2" ng-value="i.Id" ng-model="item2.itemval" >{{i.Name}}</ion-radio>
</ion-list>
</ion-content>
</ion-view>
From the controller javascript file:
.controller("MainCtrl", function($scope) {
$scope.items = [
{ Id: 1, Name: "Test 1", value: "t1" },
{ Id: 2, Name: "Test 2", value: "t2" },
{ Id: 3, Name: "Test 3", value: "t3" }
];
$scope.items2 = [
{ Id: 4, Name: "Test 4", value: "t4" },
{ Id: 5, Name: "Test 5", value: "t5" },
{ Id: 6, Name: "Test 6", value: "t6" }
];
$scope.item = { itemval: "2" };
$scope.item2 = { itemval: "4" };
});
You need to set the name property on the ion-radio to denote that they belong to different group.
Make these changes in app.html to make it work:
<ion-view view-title="Radio button demo">
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Chosen option: {{item}}, {{item2}}</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-radio ng-repeat="i in items" ng-value="i.Id" ng-model="item.itemval" name="group1">{{i.Name}}</ion-radio>
</ion-list>
<ion-list>
<ion-radio ng-repeat="i in items2" ng-value="i.Id" ng-model="item2.itemval" name="group2">{{i.Name}}</ion-radio>
</ion-list>
</ion-content>
</ion-view>
Edited plunker here: http://plnkr.co/edit/8IU4xskZOiOWcNScprHh?p=preview
Related
I want to display nested list. The structure of the list:
[
{
name: "Level 1A",
children: [
{
name: "Level 2A",
children: [
]
},
{
name: "Level 2B",
children: [
{
name: "Level 3A",
children: [...]
}
]
}
]
},
{
name: "Level 1B",
children: [
{
name: "Level 2A"
children: [...]
}
]
}
]
As you can see we have items with 2 properties: name and children. It could be nestem many many levels down.
The HTML output should be something like this:
<list>
<list-grup name="Level 1A">
<list-item name="Level 2A"></list-item>
<list-item name="Level 2B"></list-item>
</list-grup>
<list-grup name="Level 1B">
<list-item name="Level 2A"></list-item>
</list-grup>
</list>
The only way i found is to display it like this:
<list>
<ng-container *ngFor="let item of list">
<list-group *ngIf="item.children" [item]="item.name">
<ng-container *ngFor="let item1 of item.children">
<list-group [item]="item1.name">
<list-group *ngIf="item1.children" [item]="item1.name">
<ng-container *ngFor="let item2 of item1.children">
...
</ng-container>
</list-group>
</list-group>
</ng-container>
</list-group>
</ng-container>
</list>
But this way is incorrect because I dont want it to be hardcoded because this data will be dynamic.
Can you help me find better solution to display this data? It could be done in template or component.
One possible way is to create a component which represents a single Node (name, children)
first the interface:
export interface Node {
name: string;
children: Node[];
}
component with one #Input() binding
export class NodeComponent implements OnInit {
#Input() node: Node;
html
<li>
<p>{{node.name}}</p>
<ul *ngFor="let item of node.children">
<app-node [node]="item"></app-node>
</ul>
</li>
begin the whole process from:
<ul>
<ng-container *ngFor="let item of list">
<app-node [node]="item"></app-node>
</ng-container>
</ul>
Working Stackblitz
Version with Expand/Collapse support
I want to display my json data with sliding feature. Here is the design of what i want to do. I saw carousel is for sliding images but i don't know how to achieve this one. Any help would be great.
And here is sample code.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myDatas = [{
Paramnames: "Travel Material",
options: [{
name: "Newspaper"
},
{
name: "Magazine"
},
{
name: "Book"
}
]
},
{
Paramnames: "Safety & Security",
options: [{
name: "Health"
},
{
name: "Private Policy"
},
{
name: "Flight Disruption"
}
]
}
];
});
<div ng-app="myApp" ng-controller="myCtrl">
<div class="col-sm-3" ng-repeat="myData in myDatas">
<p class="m-t-xs font-bold"><strong>{{myData.Paramnames}} </strong></p>
<div class="col-sm-8" ng-repeat="myOptions in myData.options">
<p class="m-t-xs font-bold">{{myOptions.name}}
</p>
</div>
</div>
</div>
I finally found an answer for my question. I thought it might help i used angular-slick directive its so cool. http://vasyabigi.github.io/angular-slick/
I am trying to build a simple accordion in Ionic 2 by pulling data from a json file.
I can iterate through the category and subcategories items to list those, however once a subcategory is clicked, I am not able to fetch the data from the subcategory object and display it (subcategory title) on a detail page. I have looked at many different tutorials/forums but couldn't find how to do this anywhere.
I imagine it is not just an issue with the path but I might need to iterate through the subcategory objects further?
json
{
"results": [
{
"category": "Category 1",
"subCategory": [
{
"title": "subCategory 1.1",
"word": "hello"
},
{
"title": "subCategory 1.2",
"word": "hello"
}
]
},
{
"category": "Category 2",
"subCategory": [
{
"title": "subCategory 2.1",
"word": "hello"
},
{
"title": "subCategory 2.2",
"word": "hello"
}
]
}
]
}
home.html
<ion-header>
<ion-navbar color="primary">
<ion-title>Categories</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let item of (items | async)?.results">
{{ item.category }}
<div *ngFor="let subItem of item.subCategory">
<button (click)="openDetails(item)">{{ subItem.title }}</button>
</div>
</ion-item>
</ion-list>
</ion-content>
home.ts
export class HomePage {
items: any;
subcategories: any;
constructor(public navCtrl: NavController, public http: Http) {
this.items = this.http.get("assets/data/results-data.json").map(res => res.json());
}
openDetails(item) {
this.navCtrl.push('FilmDetailsPage', {item: item});
}
}
detail.html
<ion-header>
<ion-navbar color="primary">
<ion-title>{{ item.subCategory.title }}</ion-title> // NOT WORKING
</ion-navbar>
</ion-header>
You need to send the subItem i.e. each subcategory and not the item to openDetails() function.
<button (click)="openDetails(subItem)">{{ subItem.title }}</button><!-- here -->
In your details.html,
you can access as
<ion-title>{{ subItem.title }}</ion-title> <!-- make sure the parameter in ts file has name subItem. -->
I have 'recommendations', an array of recommendation like:
{Id: 1, Label: "option 1"},
{Id: 2, Label: "option 2"}
And 'items', an array of item like:
{Id: 1, Name: "Name 1", Recommend: recommendations[0]},
{Id: 2, Name: "Name 2", Recommend: recommendations[1]}
Now I like to show a list of items, for each item, show item name and radio button group to let user select one of possible 'Recommend' options.
My html looks like:
<div ng-repeat="i in viewModel.items">
<div>
{{i.Name}}
</div>
<div class="form-group">
<label class="control-label col-md-3">Recommend this?</label>
<div class="col-md-9">
<div class="radio" ng-repeat="r in viewModel.recommendations">
<label>
<input type="radio" ng-model="i.Recommend" ng-value="r"/>
{{r.Label}}
</label>
</div>
</div>
{{i.Name}}, {{i.Recommend.Label}}
</div>
</div>
{{viewModel.items | json}}
When I click one of options for each item, I see corresponding Recommend.Label is changing properly so it seems to be bound to model ok.
My problem is that, on initial page load, radio button group of each item is not showing the current option even though 'items' seems to have one of possible Recommend object. (All radio buttons are not checked).
What am I missing?
You should set the item's "Recommend" value to bound to $scope.recommendations at the beginning.
angular.module('test', []).controller('testCtrl', function($scope) {
$scope.viewModel = {};
$scope.viewModel.recommendations = [{Id: 1, Label: "option 1"}, {Id: 2, Label: "option 2"}];
$scope.viewModel.items = [{Id: 1, Name: "Name 1", Recommend: $scope.viewModel.recommendations[0]}, {Id: 2, Name: "Name 2", Recommend: $scope.viewModel.recommendations[1]}]; });
jsFiddle: http://jsfiddle.net/rkgetptj/
I just started with ionic and I know this is probably super easy. I've been reading about how to use ionic and angular, but haven't been able to figure this easy little task out.
I just want to simply pull json from an external file. I'm still reading the docs, but can't manage to figure out how to do this just yet.
http://codepen.io/anon/pen/wKwxpX
var myApp = angular.module('myApp', ['ionic']);
myApp.controller('MainCtrl', function() {
//instead of hard coded json, I need to get json from an external source here
this.items = [
{title: "Item 1"},
{title: "Item 2"},
{title: "Item 3"},
{title: "Item 4"},
{title: "Item 5"},
]
for (var i = 0; i < 1000; i++)
this.items.push(i);
});
You could use $http call to make an ajax for external ajax and inside success call bind that result to the $scope variable.
Also you need to wrap title in " double quotes to make it valid json like "title"
Markup
<body ng-controller="MainCtrl as main">
<ion-header-bar class="bar-positive">
<h1 class="title">1000 Items</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item collection-repeat="item in main.items">
{{item.title}}
</ion-item>
</ion-list>
</ion-content>
</body>
Controller
var myApp = angular.module('myApp', ['ionic']);
myApp.controller('MainCtrl', function($http) {
var main = this
$http.get('data.json').success(function(data){
main.items = data;
})
});
data.JSON
[{
"title": "Item 1"
}, {
"title": "Item 2"
}, {
"title": "Item 3"
}, {
"title": "Item 4"
}, {
"title": "Item 5"
}]
Demo Plunkr