my html code;
<!doctype html>
<html ng-app ng-controller="peopleController">
<head>
<script src="js/angular.min.js" type="text/javascript"></script>
<script>
function peopleController($scope){
$scope.people = [
{ name : "aa" , age : 14 },
{ name : "ss" , age : 11},
{ name : "dd" , age : 12},
{ name : "ff" , age : 16},
{ name : "gg" , age : 13}
];
$scope.keys=(function(obj){
var keys = [];
for(var key in obj){
console.log(obj);
if(obj.hasOwnProperty(key)){ keys.push(key);}
}
return keys;
})($scope.people[0]);
}
</script>
<title>aasss</title>
</head>
<body >
<select ng-model="aaa">
<option ng-repeat="x in keys" value="{{x}}">{{x}}</option>
</select>
</body>
</html>
generated html part for select element;
<select ng-model="aaa" class="ng-pristine ng-valid">
<option value="? undefined:undefined ?"></option>
<!-- ngRepeat: x in keys -->
<option ng-repeat="x in keys" value="name" class="ng-scope ng-binding">name</option>
<option ng-repeat="x in keys" value="age" class="ng-scope ng-binding">age</option>
</select>
when I remove ng-model="aaa" attribute from select element the problem does not appear.
what could be the problem?
You should not be using ng-repeat in select, review select doc. select has its own comprehensions mechanism. Also, not sure why you have 2 ng-repeat in your selector. Seems like you might want to encapsulate the 2 sets of keys.
Related
I am totally new to Angular Js 1.0 and I am struggling in one of the simple code here. I wanted to show the default selected value in my dropdown. Below is the code I have used
<select id="ddlHeritage" class="form-control" columnname="HeritageIssues"
ng-change="riskCltr.showriskcomment()"
ng-focus-compliance="" ng-model-options="{'updateOn':'default blur', 'debounce':{'default': 250, 'blur':0}}" ng-model="McProMainCtrl.mcProEntry.McPro_Risk.HeritageIssues">
<option ng-repeat="item in (ValuerList = (McProMainCtrl.mcProEntry.McPro_DropDownData | orderBy:'Name' | filter:{GroupID:'120'} )) "
ng-selected="{{item.Value==McProMainCtrl.mcProEntry.McPro_Risk.HeritageIssues}}" value="{{::item.Value}}">
{{::item.Name}}
</option>
</select>
In the above code I am getting dropdown value from database(including the "--Select--" value)
However, I have null values under the field McProMainCtrl.mcProEntry.McPro_Risk.HeritageIssues.
I wanted to select value --Select-- when McProMainCtrl.mcProEntry.McPro_Risk.HeritageIssues value is null. I am actually struggling as to how to accomplish it in angularjs
When I add the below line above Option it add two "Select"
<option value="null">--Select--</option>
Any help is appreciated.
Try adding value="null" in your select element :
<select id="ddlHeritage" value="null" class="form-control" columnname="HeritageIssues"
ng-change="riskCltr.showriskcomment()"
ng-focus-compliance="" ng-model-options="{'updateOn':'default blur', 'debounce':{'default': 250, 'blur':0}}" ng-model="McProMainCtrl.mcProEntry.McPro_Risk.HeritageIssues">
<option ng-repeat="item in (ValuerList = (McProMainCtrl.mcProEntry.McPro_DropDownData | orderBy:'Name' | filter:{GroupID:'120'} )) "
ng-selected="{{item.Value==McProMainCtrl.mcProEntry.McPro_Risk.HeritageIssues}}" value="{{::item.Value}}">
{{::item.Name}}
</option>
</select>
This is similar things I have solve in my project. No need any option
var app = angular.module('angularjs-starter', []);
app.controller("unitController", function ($scope) {
$scope.units = [{name: "Crore", value: "Crore"},
{name: "Lakh", value: "Lakh"},
{name: "INR", value: "INR"},
{name: "--------", value: "", separator: true},
{name: "Million", value: "Million"}];
$scope.financialDataUnit = "Crore";
});
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller='unitController'>
<select ng-model="financialDataUnit"
ng-options="unit.value as unit.name disable when unit.separator for unit in units">
</select>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
.margins{
margin-right:8px;
margin-bottom: 5px;
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<h2>LogValues</h2>
<div class="logval" ng-repeat="num in loop">
<select class="margins" ng-change=populate() class="custom-select"
id="inputGroupSelect01" ng-model="logType"
ng-options="x.type for x in logValues[0].parameters">
<option value="" disabled selected>Select Log Values</option>
</select>
<select class="margins" ng-model="logVal"
ng-options="y.val for y in statistics">
<option value="" disabled selected>Select Statistic</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.loop = [1,2,3,4];
$scope.logValues =
[
{
"name" : "Log Values",
"parameters" :
[
{"type":"Depth Curve"},{"type":"Conductivity Attenuation -Corr- 400kHz BHI_LWD"},{"type":"Conductivity [CACLMED]"},{"type":"DeepResistivity[RACLMED]"},
{"type":"DeltaTCompressionalBHI_LWD"},{"type":"Sonic Compressional [DTCED]"},{"type":"Gamma Ray - Apparent BHI_LWD"},{"type":"Gamma Ray [GRAMED]"},
{"type":"Medium Resistivity [RPCLMED]"},{"type":"Resistivity Attenuation -Corr- 2MHz BHI_LWD"}
]
}];
$scope.statistics = []
$scope.populate = function() {
$scope.statistics = [
{"val":"None"},{"val":"Mean"},{"val":"Median"},{"val":"Mode"},{"val":"Std Deviation"},{"val":"Variance"},
{"val":"Mix "},{"val":"Max"}
]
}
});
</script>
</body>
</html>
The Above code is printing the two select boxes four times.The requirement is to not show any option in second select box before the user selects the first select box.I have achieved it by emptying the statistics array initially and populating it using on change function.
The problem is that when I select an option in first select box in row1 the respective 'select statistic' is getting populated which is fine but along with it the remaining 'select statistic' select boxes are also getting populated.I need it to be empty until i select the respective row select box.The explanation may be confusing please check the demo for better understanding. Thanks in Advance!Please help..
I have included the Demo
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
.margins{
margin-right:8px;
margin-bottom: 5px;
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<h2>LogValues</h2>
<div class="logval" ng-repeat="num in loop">
<select class="margins" id="inputGroupSelect01"
ng-model="num.logType"
ng-options="x.type for x in logValues[0].parameters">
<option value="" disabled selected>Select Log Values</option>
</select>
<select class="margins" ng-disabled="!num.logType"
ng-model="logVal"
ng-options="y.val for y in statistics">
<option value="" selected>Select Statistic</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.loop = [{"stat":1},{"stat":2},{"stat":3},{"stat":4}];
$scope.logValues =
[
{
"name" : "Log Values",
"parameters" :
[
{"type":"Depth Curve"},{"type":"Conductivity Attenuation -Corr- 400kHz BHI_LWD"},{"type":"Conductivity [CACLMED]"},{"type":"DeepResistivity[RACLMED]"},
{"type":"DeltaTCompressionalBHI_LWD"},{"type":"Sonic Compressional [DTCED]"},{"type":"Gamma Ray - Apparent BHI_LWD"},{"type":"Gamma Ray [GRAMED]"},
{"type":"Medium Resistivity [RPCLMED]"},{"type":"Resistivity Attenuation -Corr- 2MHz BHI_LWD"}
]
}];
// $scope.statistics = []
// $scope.populate = function() {
$scope.statistics = [
{"val":"None"},{"val":"Mean"},{"val":"Median"},{"val":"Mode"},{"val":"Std Deviation"},{"val":"Variance"},
{"val":"Mix "},{"val":"Max"}
]
//}
});
</script>
</body>
</html>
First you must loop on objects instead of numbers in $scope.loop in order to generate different scope for each select model, one value for each ng-model and then you can disable the second select box depending on the value of the first select box. Here I have disabled the second select box if the first select box model is undefined.. It will be enabled once you pick up a log value
I have a dropdown show below card information and i want to show is_default= true card show top other cards below.. please help me
<select ng-model="approvedinvoicesCtrl.currentcard.card_id">
<option ng-value="item.card_id" ng-repeat="item in approvedinvoicesCtrl.current_job.cards ">{{item.brand +' '+ item.last_digits}}</option>
</select>
{brand:"Visa",
card_id:"card_19VHhAGdj8iWoXDURuRqNH28",
last_digits : 123123,
is_default:true},
{
brand:"Master",
card_id:"card_19VHhAGdj8iWoXDURuRqNH28",
last_digits : 123123,
is_default:false}
Suggesting you with this
<select>
<option ng-value="item.card_id" ng-repeat="item in dropdownval "
ng-selected=item._default >
{{item.brand +' '+ item.last_digits}}</option>
</select>
LIVE DEMO
I will suggest to use ngOptions on option element instead of ng-repeat.
Note: ngOptions provides an facility for the "option" element which should be used instead of ngRepeat when you want the select model to be bound to a non-string value. This is because an option element can only be bound to string values at present. For more information you can check this link.
Working demo with ngOptions :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.current_job = {
"cards": [
{
brand:"Visa",
card_id:"card_19A",
last_digits : 123123,
is_default:true
}, {
brand:"Master",
card_id:"card_19B",
last_digits : 123123,
is_default:false
}
]
};
for (var i in $scope.current_job.cards) {
if ($scope.current_job.cards[i].is_default == true) {
$scope.topCard = $scope.current_job.cards[i].card_id;
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-options="item.card_id as item.brand+' '+item.last_digits for item in current_job.cards"
ng-model="topCard">
</select>
</div>
Working demo with ngRepeat :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.current_job = {
"cards": [
{
brand:"Visa",
card_id:"card_19A",
last_digits : 123123,
is_default:true
}, {
brand:"Master",
card_id:"card_19B",
last_digits : 123123,
is_default:false
}
]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="currentcard.card_id">
<option ng-value="item.card_id" ng-repeat="item in current_job.cards" ng-selected="item.is_default">{{item.brand +' '+ item.last_digits}}</option>
</select>
</div>
You should use the ng-init and the ng-options for defaults values like:
<select ng-init="somethingHere = options[1]"
ng-model="somethingHere"
ng-options="option for option in options">
</select>
$scope.options = [
'Brand1',
'Brand2',
'Brand3'
];
You can use orderby
<select ng-model="approvedinvoicesCtrl.currentcard.card_id><option ng-value="item.card_id" ng-repeat="item in approvedinvoicesCtrl.current_job.cards | orderBy:'is_default':false">{{item.brand +''+ item.last_digits}}</option></select>
Here item 'is_default' property is sorted in a reversed order. The 2nd argument can be any order function, so you can sort in any rule.
#link http://docs.angularjs.org/api/ng.filter:orderBy
You may prefer pre-selecting the card (option selected) instead of sorting using the default card at the top.
You can use the ng-selected using the default value if no value is selected in ng-model , otherwise, it selects the value in ng-model.
<select ng-model="currentCard.selected" >
<option
ng-value="item.card_id" ng-repeat="item in cards"
ng-selected="(currentCard.selected==item.card_id) || (!currentCard.selected && item.is_default)">
{{item.brand +' '+ item.last_digits}}
</option>
</select>
or you can use the ng-options approach. In this last case, you can pre-select an option using the ng-model value only.
<select
ng-model="currentCard.selected"
ng-options="item.card_id as item.brand+' '+item.last_digits for item in cards">
</select>
See this fiddle with both examples:
https://jsfiddle.net/hdca55cg/
The second one shows default card if you have previously selected in the model.
I have a select dropdown in a form, it's not passing value to {{service}} object:
<select name="categoryId" ng-model="service.categoryId" ng-options="category.id as category.name for category in categories track by category.categoryId" required>
<option value="0">-select a category-</option>
</select>
And I can't find a reason why, anyone?
Check this example, it may help you:
function theController($scope) {
$scope.categories = [
{name:'First', id:'A', categoryId: 1},
{name:'Second', id:'B', categoryId: 2},
{name:'Third', id:'C', categoryId: 3}
];
$scope.service = $scope.categories[1];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app>
<div ng-controller="theController">
<select name="categoryId"
ng-model="service"
ng-options="category as category.name for category in categories track by category.categoryId" required>
<option value="">-select a category-</option>
</select>
<pre>categories = {{categories|json}}</pre>
<pre>service = {{service|json}}</pre>
</div>
</body>
I have a data set of objects that I'm displaying using ng-options. I'm binding the objects ID value to the value using track by
Currently, the data values are being included but they're being displayed with commas. For example...
$scope.items = [
{ID: '2012', Title: 'Chicago'},
{ID: '2013', Title: 'New York'},
{ID: '2014', Title: 'Washington'},
];
<select ng-options="item.Title for item in items track by item.ID">
</select>
But this will render...
<option value="2,0,1,2" label="Chicago">Chicago</option>
<option value="2,0,1,3" label="New York">New York</option>
Why are these commas being added, and how can I remove them?
You don't need track by:
<select ng-options="i.ID as i.Title for i in items" ng-model="someModel"></select>
After rendering you will have:
<option value="2012">Chicago</option>
<option value="2013">New York</option>
Your way
<select ng-options="item.ID as item.Title for item in items" ng-model="someModel"></select>
Fiddle
Alternate way
<select ng-model="selectedItem">
<option ng-repeat="item in items" value="{{item.ID}}">{{item.Title}}</option>
</select>
Fiddle2
You want:
<select ng-options="obj.ID as obj.title for obj in items"></select>
Track by just helps angular internally with array sorting. See: stack overflow answer
Try this:
<select ng-model="selectedItemID" ng-options="item.ID as item.Title for item in items">
</select>
Selected ID: {{selectedItemID}}
function MyController($scope){
$scope.items = [
{ID: '2012', Title: 'Chicago'},
{ID: '2013', Title: 'New York'},
{ID: '2014', Title: 'Washington'},
];
};
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MyController">
<select ng-model="selectedItem" ng-options="item.ID as item.Title for item in items track by item.ID"></select>
<br/>{{selectedItem}}
</body>
</html>
Following should work:--
<select ng-model="selectedItem" ng-options="item.ID as item.Title for item in items track by item.ID"></select>
{{selectedItem}}
If you want it to be by id then you should use
item.id as item.name for item in items