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>
Related
When i am selecting from dropdown it bind into model but the label of selection showing blank.
<select class="form-control" ng-options="data as data.field for data in reportAnalysis.categoryFields track by data.id" ng-model="reportAnalysis.testData">
<option value="" selected disabled>---Select---</option>
</select>
Any solution Please help?
As per the data that you mentioned, your select statement should be categoryFields.response. Not sure if you have already set your categoryFields to hold response object directly. Also the data that you shared has a square bracket and curly brace missing, assuming it to be a typo error. You can check working jsfiddle link for more clarity
<select class="form-control" ng-options="data as data.field for data in reportAnalysis.categoryFields.response track by data.id" ng-model="reportAnalysis.testData">
<option value="" selected disabled>---Select---</option>
</select>
jsfiddle : https://jsfiddle.net/caq0ne1d/27/
Let me know if this helped.
var app = angular.module("Profile", [])
app.controller("ProfileCtrl", function($scope) {
$scope.reportAnalysis = {}
$scope.reportAnalysis['categoryFields'] = [{
"id": 178,
"field": "Attachments",
"sort_order": 1,
"field_type": [{
"id": 178,
"type": 5,
"is_mandatory": 0,
"conditional_field_id": 0,
"conditional_field_value": ""
}]
}]
$scope.reportAnalysis['testData'] = {}
$scope.update_data = function() {
console.log($scope.reportAnalysis['testData'])
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
<select class="form-control" ng-options="data as data.field for data in reportAnalysis.categoryFields track by data.id" ng-model="reportAnalysis.testData" ng-change="update_data()">
<option value="" selected disabled>---Select---</option>
</select>
</body>
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 created a local db.json file that looks like this:
{
"project_topics": [
"- Any -",
"Access for disadvantaged",
"Agriculture, forestry and fisheries",
"Animal welfare",
"Energy and resources",
"Enhance social inclusion, equal opportunities and participation in sports",
"Enterprise, industry and SMEs (incl. entrepreneurship)",
"Entrepreneurial learning - entrepreneurship education",
"Environment and climate change"
]}
I want to populate input with ng-repeat and I do it like so:
<label class="item item-select " id="findYourProject-select3">
<span class="input-label">type of project</span>
<select ng-repeat="topic in project_topics"></select>
</label>
The input is not being populated. What should I consider?
You have to give ng-repeat for options not select
see the plunker json from external file http://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$http) {
$scope.data = {
"project_topics": [
"- Any -",
"Access for disadvantaged",
"Agriculture, forestry and fisheries",
"Animal welfare",
"Energy and resources",
"Enhance social inclusion, equal opportunities and participation in sports",
"Enterprise, industry and SMEs (incl. entrepreneurship)",
"Entrepreneurial learning - entrepreneurship education",
"Environment and climate change"
]};
/* var urlPath = 'db.json';
$http.get(urlPath).then(function(response) {
$scope.data = response.data;
}, function(error) {
});*/
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<select ng-model="singleSelect">
<option ng-repeat="topic in data.project_topics">{{topic}}</option>
</select>
</body>
<label class="item item-select " id="findYourProject-select3">
<span class="input-label">type of project</span>
<select>
<option ng-repeat="topic in project_topics" value="{{topic}}">{{topic}}</option>
</select>
</label>
You want to repeat the option. Not the select.
In AngularJS - I have dropdown code as below. type.entityTypeId field is a long data type. The dropdown works fine in the create page and able to insert the 'type.entityTypeId' field into the DB.
But it does not work while reloading the same data in the Edit page with same code.
Is this problem because I have the datatype as Long ?
I have other drop downs working fine in which I have all String data type.
<div class="form-group">
<label class="control-label col-md-2 required">ENTITY TYPE</label>
<div class="col-md-2">
<select name="entityType" class="form-control" ng-model="entity.entityType.entityTypeId"
required="required">
<option value="">Please select</option>
<option ng-repeat="type in entityTypes" value="{{type.entityTypeId}}">{{type.entityTypeName}}</option>
</select>
</div>
<span style="color: red" ng-show="entityAddForm.entityType.$invalid"> <span
ng-show="entityAddForm.entityType.$error.required">Entity type is required.</span>
</span>
</div>
Updated:
This is a json used to load the drop down data. And you can see the entityTypeId is a number. In other cases it works if the id is a String.
[
{
entityTypeId: 3,
entityTypeName: "Branch of Legal Entity"
},
{
entityTypeId: 1,
entityTypeName: "Legal Entity"
},
{
entityTypeId: 2,
entityTypeName: "Notional Entity"
}
]
As per the documentation at: https://docs.angularjs.org/api/ng/directive/select
It looks like you do need to use a String at the moment.
Using numbers should not be an issue. I know that the documentation only uses string, but I'm able to use the same using number.
<div ng-app="myApp" ng-controller="myController">
<select ng-model="entity.selected">
<option value="{{ent.entityTypeId}}" ng-repeat="ent in entityTypes">{{ent.entityTypeName}}</option>
</select>
Selected entity id {{entity.selected}}
</div>
angular.module("myApp", [])
.controller("myController", ["$scope", function ($scope) {
$scope.entityTypes = [{
entityTypeId: 3,
entityTypeName: "Branch of Legal Entity"
}, {
entityTypeId: 1,
entityTypeName: "Legal Entity"
}, {
entityTypeId: 2,
entityTypeName: "Notional Entity"
}];
$scope.entity = {
selected: 3
};
}]);
JSFiddle
Fiddle with the relevant code: http://jsfiddle.net/gFCzV/7/
I'm trying to set the selected value of a drop down that is bound to a child collection of an object referenced in an ng-repeat. I don't know how to set the selected option since I can't reference the collection it's being bound to in any way that I'm aware of.
HTML:
<div ng-app="myApp" ng-controller="SomeController">
<div ng-repeat="Person in People">
<div class="listheader">{{Person.firstName}} {{Person.lastName}}</div>
<div class="listitem" ng-repeat="Choice in Person.Choices">
{{Choice.Name}}:
<select
ng-model="Choice.SelectedOption"
ng-options="choice.Name for choice in Choice.Options"></select>
{{Choice.SelectedOption.ID}}
</div>
</div>
</div>
JS:
var myApp = angular.module('myApp', []);
myApp.controller("SomeController", function($scope) {
$scope.People = [{
"firstName": "John",
"lastName": "Doe",
"Choices": [
{
"Name":"Dinner",
"Options":[{Name:"Fish",ID:1}, {Name:"Chicken",ID:2}, {Name:"Beef",ID:3}],
"SelectedOption":{Name:"Chicken",ID:2} //this doesn't work
},
{
"Name":"Lunch",
"Options":[{Name:"Macaroni",ID:1}, {Name:"PB&J",ID:2}, {Name:"Fish",ID:3}],
"SelectedOption":""
}
],
}, {
"firstName": "Jane",
"lastName": "Doe"
}];
});
Is this the one case where I should actually be using ng-init with a SelectedIndex on the model?
If using AngularJS 1.2 you can use 'track by' to tell Angular how to compare objects.
<select
ng-model="Choice.SelectedOption"
ng-options="choice.Name for choice in Choice.Options track by choice.ID">
</select>
Updated fiddle http://jsfiddle.net/gFCzV/34/
You can use the ID field as the equality identifier. You can't use the adhoc object for this case because AngularJS checks references equality when comparing objects.
<select
ng-model="Choice.SelectedOption.ID"
ng-options="choice.ID as choice.Name for choice in Choice.Options">
</select>
Using ng-selected for selected value. I Have successfully implemented code in AngularJS v1.3.2
<select ng-model="objBillingAddress.StateId" >
<option data-ng-repeat="c in States" value="{{c.StateId}}" ng-selected="objBillingAddress.BillingStateId==c.StateId">{{c.StateName}}</option>
</select>