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
Related
This question already has answers here:
Angular injects "string:" before value in ng-options
(2 answers)
Closed 5 years ago.
When I add ng-options to a select element, I get options that look like this:
<select name="folderId" data-ng-model="message.folderId" data-ng-options="folder.id as folder.name for folder in folders">
<option value="" class="">No Folder</option>
<option label="Bulk" value="string:0fedcc77-4cc5-4a9a-ba2f-847f8581d4d7" selected="selected">Bulk</option>
<option label="Auto Responder" value="string:d0898116-88ce-4e25-8d91-b17a7a29adc1">Auto Responder</option>
<option label="Customer Service" value="string:6ec044c1-c378-42de-82ad-f3dc63c58f00">Customer Service</option>
</select>
The problem with the above is that Angular is adding string: in front of the folder ID. This form is submitting data to a remote page when clicked. However, the string: is turning a valid guid into an invalid guid. would it be possible to instruct Angularjs to not add extra information to the value attribute?
Thanks.
Try change to this
<select name="folderId" data-ng-options="folder.id as folder.name for folder in folders track by folder.id">
var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
$scope.folders = [{
"name": "A",
"id": "12"
}, {
"name": "B",
"id": "15"
}, {
"name": "C",
"id": "13"
}];
$scope.folder = $scope.folders[0];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="FirstCtrl as vm">
<form name="form">
<select name="folderId" ng-model="folder" data-ng-options="folder as folder.name for folder in folders track by folder.id"></select>
</form>
</div>
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>
I have json of all countries with me.
{"countries":[
{"name":"Afghanistan","code":"AF"},
{"name":"Åland Islands","code":"AX"},
{"name":"United States","code":"US"},
{"name":"Canada","code":"CA"},
{"name":"India","code":"IN"}
]};
I want to create drop down like
"
Choose Country(Default)
United States
Canada
------------
Åland Islands
Afghanistan
India
So on..."
I can be achieved via ng-repeat like
<select name="country" id="country" data-ng-model="country" required data-ng-change="allSelect()">
<option value="default" data-ng-data-ng-bind="'Choose Country'"></option>
<option value="{{cList.code}}" data-ng-if="cList.code === 'US'" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option>
<option value="{{cList.code}}" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option>
<option value="default1">--------------------------------------------------</option>
<option value="{{cList.code}}" data-ng-if="cList.code !== 'US' && cList.code !== 'CA'" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option>
</select>
How can i do same via ng-options?
Currently if i want to select any option by default is not happening its creating blank string.
Country list and default values i am getting from different ajax call.
You need to make some changes to your JSON
JSON
{
"Collections": [{
"Name": "North America",
"Countries": [{
"Name": "United States",
"code": "US"
}, {
"Name": "Canada",
"code": "CA"
}
]
}, {
"Name": "Asia",
"Countries": [{
"Name": "India",
"value": "IN"
}
]
}]
}
HTML
<body ng-controller="dobController">
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select ng-model='theModel' ng-change="display(theModel)">
<optgroup ng-repeat='group in collection' label="{{group.Name}}">
<option ng-repeat='veh in group.Countries' value='{{group.Name}}::{{veh.Name}}'>{{veh.Name}}</option>
</optgroup>
</select>
</div>
</form>
</div>
</div>
Controller
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope", "$http",
function($scope, $http) {
$http.get('test.json').then(function(response) {
$scope.collection = response.data.Collections;
console.log(response);
});
$scope.display = function(name) {
alert(name.split("::")[0] + "." + name.split("::")[1]);
}
}
]);
DEMO
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.