I am facing problem in two radio group box in ionic when i click on one group of radio the selected answer was saved after clicking second radio group first selected radio was removed
<div ng-app="ionicApp" ng-controller="HomeCtrl" style="padding:25px">
{{question | json }}
<div ng-repeat="q in question" >
<div class="list">
<div class="item item-divider">
{{q.question}}
</div>
<ion-radio ng-repeat="option in q.options" ng-value="option" ng-model="q.answer" >
{{ option }}
</ion-radio>
<br>
</div>
</div>
angular.module('ionicApp', ['ionic'])
.controller('HomeCtrl', function($scope) {
$scope.question =
[
{
"is_radio": true,
"question": "Roughly how much of your profile was spent on digital activities in your last job?",
"options": ["Less than 10%","Less than 25%","Less than 50%","More than 50%"],
"id": "130",
"answer": ""
},
{
"is_radio": true,
"question": "Have you spent more time with B2B or B2C?",
"options": ["B2C","Both","Less than 10%"],
"id": "130",
"answer": ""
}
]
})
Here is preview | jsfiddle
Please change following line of code
<ion-radio ng-repeat="option in q.options" ng-value="option" ng-model="q.answer">
With this
<ion-radio ng-repeat="option in q.options" ng-value="option" ng-model="q.answer" name="radio_{{$parent.$index}}" >
This will solve your issue. Problem was due to same name given to 2 radio button group. So I had changed that and given dynamically.
angular.module('ionicApp', ['ionic'])
.controller('HomeCtrl', function($scope) {
$scope.question =
[
{
"is_radio": true,
"question": "Roughly how much of your profile was spent on digital activities in your last job?",
"options": ["Less than 10%","Less than 25%","Less than 50%","More than 50%"],
"id": "129",
"answer": ""
},
{
"is_radio": true,
"question": "Have you spent more time with B2B or B2C?",
"options": ["B2C","Both","Less than 10%"],
"id": "130",
"answer": ""
}
]
})
<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet"/>
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
<div ng-app="ionicApp" ng-controller="HomeCtrl" style="padding:25px">
{{question | json }}
<div ng-repeat="q in question" >
<div class="list">
<div class="item item-divider">
{{q.question}}
</div>
<ion-radio name="{{q.id}}" ng-repeat="option in q.options" ng-value="option" ng-model="q.answer" >
{{ option }}
</ion-radio>
<br>
</div>
</div>
</div>
Related
We are creating a quiz using angularjs.
We want to show the radiobutton list direction vertically or horizontally.
If it is horizontally we want do show in 2 columns.
Help me to show horizontally or vertically
Have provided the code in
var app = angular.module("quizApp", []);
app.controller("quizCtrl", function ($scope) {
$scope.questions = [
{
question: "Which is the largest country in the world by population?",
options: ["India", "USA", "China", "Russia"],
answer: 2,
direction:0
},
{
question: "When did the second world war end?",
options: ["1945", "1939", "1944", "1942"],
answer: 0,
direction: 1
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<body>
<div ng-app="quizApp" ng-controller="quizCtrl">
<div data-ng-repeat="quiz in questions track by $index" data-ng-init="quizIndex = $index" layout="column">
<div layout="row">
<span data-ng-bind="quiz.question"></span>
</div>
<div layout="row" data-ng-repeat="option in quiz.options track by $index" data-ng-init="optionIndex = $index">
<input type="radio" data-ng-value="{{option}}" style="margin-right: 5px;"
name="Options_{{quizIndex}}_Response_{{optionIndex}}" />
<span id="spnAnswer_{{quizIndex}}_{{optionIndex}}" data-ng-bind="option" />
</div>
</div>
</div>
</body>
You can use ng-class in the div of your repeater to show horizontal or vertical way.
Your HTML template might be look like following:
<div ng-class="'class-for-horizontal-display': !showVertical, 'class-for-vertical-display': showVertical" data-ng-repeat="quiz in questions track by $index" data-ng-init="quizIndex = $index" layout="column">
</div>
and in your controller you should have a $scope variable "showVertical" like:
$scope.showVertical = false
Currently I have a JSON file look like this:
[
{
"name":"Bánh bao nướng phô mai thịt",
"image":"banhbaonuongphomaithit",
"howtocook":"<h1>abc<\/h1>",
"video":"sY6bswxfVGM",
"category": "bakery"
},
{
"name":"Cháo móng giò hạt sen",
"image":"chaomonggiohatsen",
"howtocook":"Sample",
"video":"24vqCAXlQ0w",
"category": "appetizer"
},
{
"name":"Bánh mì chà bông nhân trứng muối",
"image":"banhmichabongnhantrungmuoi",
"howtocook":"Sample",
"video":"HhMj6jDIQrY",
"category": "bakery"
},
{
"name":"Cà chua muối kiểu kim chi",
"image":"cachuamuoikieukimchi",
"howtocook":"Sample",
"video":"aOYlyEiV3HQ",
"category": "appetizer"
}
]
This is my JS
var pageControllers = angular.module('pageControllers', [])
.config(function($sceProvider) {
// Completely disable SCE. For demonstration purposes only!
// Do not use in new projects or libraries.
$sceProvider.enabled(false);
});
;
pageControllers.controller('HomeController', ['$scope', '$http', function($scope, $http) {
$http.get('js/foods.json').success(function(data) {
$scope.games = data;
});
}]);
And HTML
<div class="row"> <!--First row-->
<div class="col-xs-12 col-sm-4 col-lg-3" ng-repeat = "item in games | filter: query">
<img ng-src="img/foods/{{item.image}}.png" alt="{{item.name}}">
<div class="caption">
<h5 class="text-center" ng-model="foodname">{{item.name}}</h5>
<form name="uploadItem" ng-submit="addFavorite()" novalidate ng-controller = "UploadController" ng-show = "currentUser" ng-controller = "RegistrationController">
<div class="form-group">
<input type="text" name="name" class="form-control" ng-model="foodname" ng-init="foodname='{{item.name}}'" value="{{item.name}}" >
</div>
<button type="submit" class="btn btn-block" style="background-color: #FF4500">Add to favorite</button><br>
</form>
</div>
</div><!--End of first row-->
</div>
And I want to display every records filter by category, for example when I filter appetizer or making it in a category page, all records that have appetizer category should displayed. I've though about reorganize the JSON file but still do not know how to filter it.
You should use .then and access data property
pageControllers.controller('HomeController', ['$scope', '$http', function($scope, $http) {
$http.get('foods.json').then(function(data) {
$scope.games = data.data;
});
}]);
DEMO
Add a search box to filter results by a property say 'category' as :
<input type="text" ng-model="query.category" placeholder="Search by category"/>
In this, the ng-model="query.category" would filter the ng-repeat="item in games | filter: query " on the category type
DEMO
angular.module('pageControllers', []).controller('HomeController', ['$scope', function($scope) {
$scope.games = [{
"name": "Bánh bao nướng phô mai thịt",
"image": "banhbaonuongphomaithit",
"howtocook": "<h1>abc<\/h1>",
"video": "sY6bswxfVGM",
"category": "bakery"
},
{
"name": "Cháo móng giò hạt sen",
"image": "chaomonggiohatsen",
"howtocook": "Sample",
"video": "24vqCAXlQ0w",
"category": "appetizer"
},
{
"name": "Bánh mì chà bông nhân trứng muối",
"image": "banhmichabongnhantrungmuoi",
"howtocook": "Sample",
"video": "HhMj6jDIQrY",
"category": "bakery"
},
{
"name": "Cà chua muối kiểu kim chi",
"image": "cachuamuoikieukimchi",
"howtocook": "Sample",
"video": "aOYlyEiV3HQ",
"category": "appetizer"
}
]
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="row" ng-app="pageControllers" ng-controller="HomeController">
<!--First row-->
<input type="text" ng-model="query.category" placeholder="Search by category"/>
<br> <br> <br>
<div class="col-xs-12 col-sm-4 col-lg-3" ng-repeat="item in games | filter: query ">
<img ng-src="img/foods/{{item.image}}.png" alt="{{item.name}}">
<div class="caption">
<h5 class="text-center" ng-model="foodname">{{item.name}}</h5>
<form name="uploadItem" ng-submit="addFavorite()" novalidate ng-show="currentUser">
<div class="form-group">
<input type="text" name="name" class="form-control" ng-model="foodname" ng-init="foodname='{{item.name}}'" value="{{item.name}}">
</div>
<button type="submit" class="btn btn-block" style="background-color: #FF4500">Add to favorite</button><br>
</form>
</div>
</div>
<!--End of first row-->
</div>
Thank for your kindness.
I found a way to filter the data in JSON file by category, i just need to put filter: {category:'bakery'} in the ng-repeat
ng-repeat = "item in foods | filter: query | filter: {category:'bakery'}"
I have two select box div for gettting scoredetails home teams and awayteams first and second innings
These two div are come in tabs only
So i need same ng-model in both innings for code reusing.but when i am using my browser will hang
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.homePlayers = [{
"id": "586150f2d99139510b4254bb",
"name": "Sachin Tendulkar",
"country": "India"
}, {
"id": "586150f2d99139510b4254b1",
"name": "Saurav Ganguly",
"country": "India"
}];
$scope.awayPlayers =
[{
"id": "586150f2d99139510b4254b2",
"name": "Shane Watson",
"country": "Aus"
}, {
"id": "586150f2d99139510b4254b3",
"name": "Steve Waugh",
"country": "Aus"
}];
});
this is my html content how to populate
<body ng-app="plunker" ng-controller="MainCtrl">
India bat vs Aus bowl<br>
<div class="row">
<select ng-model="battingDetail.batterId">
<option ng-repeat="item in homePlayers" value="{{item.id}}">{{item.name}}</option>
</select> <select ng-model="bowlingDetail.bowlerId">
<option ng-repeat="item in awayPlayers" value="{{item.id}}">{{item.name}}</option>
</select>
<a ng-click="submitScores('hometeam')">UPDATE SCORE</a>
</div>
Aus bat vs India bowl<br>
<div class="row">
<select ng-model="battingDetail.batterId">
<option ng-repeat="item in awayPlayers" value="{{item.id}}">{{item.name}}</option>
</select> <select ng-model="bowlingDetail.bowlerId">
<option ng-repeat="item in homePlayers" value="{{item.id}}">{{item.name}}</option>
</select>
<a ng-click="submitScores('awayteam')">UPDATE SCORE</a>
</div>
</body>
I have two select box div for gettting scoredetails home teams and awayteams first and second innings
These two div are not come in same page in my webpage tabs only.But when i am using this way ny browser will hang.
So i need same ng-model in both innings for code reusing.but when i am using my browser will hang
I have searched the web and found no example. I wonder if someone could help.
I have two instances of a dropdown or maybe more and I want to apply the add input dynamically to only that form but it applies to everyone with that ng-model everywhere on the web page.
The code is here https://plnkr.co/edit/PPDYKjztPF528yli9FbN
HTML:
<div class="main-content__right" ng-controller="QuestionController">
<div ng-repeat="element in questionList">
<fieldset>
<div ng-repeat="choice in formOptionData track by $index">
<a class="remove-field remove u-pull-right" ng-click="remove()">Remove</a>
<input id="input{{choice.name}}" placeholder="{{choice.label}}" type="number" name="{{choice.name}}">
</div>
<div id="add-more" class="well">
<div class="field">
<div style="width:100%;" class="dropdown">
<select name="{{options.name}}" id="select" data-ng-model="selectedValue" data-ng-options="options as options.label for options in element.inputElement | orderBy:'label'" ng-change="onCategoryChange(selectedValue)">
<option value="" data-id="null" disabled="" selected="">Select an item...</option>
</select>
</div>
</div>
{{formData}}
</div>
</fieldset>
</div>
</div>
APP.js
var app = angular.module("cab", []);
app.controller('QuestionController', function($scope) {
$scope.formOptionData = [];
$scope.selectedValue = {};
$scope.questionList = [{
"sectionTitle": "Travel",
"inputType": "select",
"inputElement": [{
"label": "Public transport",
"name": "travelOutgoing",
"helpInfo": "include train journeys",
"type": "select"
}, {
"label": "Taxis",
"name": "travelOutgoing",
"type": "select"
}
]
},
{
"sectionTitle": "Leisure",
"title": "Enter the amount you spend on entertainment and leisure. Leave them blank if they don\"t apply to you.",
"inputType": "select",
"inputElement": [
{
"label": "Eating out",
"name": "leisureOutgoing",
"helpInfo": "Include coffees, teas and snacks",
"type": "select"
},
{
"label": "Going out",
"name": "leisureOutgoing",
"helpInfo": "Include drinks, taxis, admission charges",
"type": "select"
}
] }
];
$scope.onCategoryChange = function(selectedItem) {
this.formOptionData.push(selectedItem);
};
$scope.remove = function(element) {
this.formData.splice(element,1);
};
});
First look at my fiddle
JavaScript:
function CountryCntrl($scope) {
$scope.filters = {};
$scope.categories = [{
"id": 1,
"title": "Company",
"children": [{
"id": 2,
"title": "About",
"children": [{
"id": 6,
"title": "Company profile",
"children": [],
"isRoot": false
}],
"isRoot": false
} ..
}
HTML:
<div class="row" ng-controller="CountryCntrl">
<div class="col-lg-12">
<h4>Filter by:</h4>
</div>
<div class="col-lg-12">
<form>
<div class="row">
<div class="col-xs-4" ng-repeat="cat in categories" ng-if="cat.isRoot==true">
<div class="form-group">
<select ng-if="cat.isRoot==true" class="form-control" ng-model="filters.rootCat" ng-options="sub_cat.title for sub_cat in cat.children track by sub_cat.id">
<option value="">level 1 - {{$index}}</option>
</select>
</div>
<div class="form-group">
<select class="form-control" ng-model="filters[cat.id]" ng-options="sub_sub_cat.title for sub_sub_cat in filters.rootCat.children track by sub_sub_cat.id">
<option value="">level 2 - {{$index}}</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
I'm not able to display the options of the select of the second level only, related to the first level.
In my fiddle you can see that you change the value of "level 1-0" the select below "level 2 - 0" is correctly populated but is binded the "level 2 - 6" too...
What's wrong ?
The problem is that you have an ng-repeat in which you use the same object as model for each item repeated, which means they will conflict and affect each other.
The simplest solution is probably to change filters.rootCat to filters['rootCat'+$index].
That way you ensure that each column of dropdowns have their own model.