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>
Related
<!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
Hi I am developing angularjs application. I tried many ways to set default value for dropdown in Angularjs but I am not able to set default value.
<select ng-change="getModel(b.ID)" ng-model="b.ID" id="brand" ng-options="b.MakeName for b in list">
<option value="1">-- Select a Make --</option>//Not working
</select>
<select ng-change="getStyle(a.ID)" ng-model="a.ID" ng-options="a.ModelName for a in Modellist" id="make" >
<option value="1">-- Select a Model --</option>
</select>//Not working
<select ng-change="getallDetails(c.ID)" id="type" ng-model="c.ID" ng-options="c.BodyStayleName for c in ModelStyle">
<option value="1">-- Select a Type --</option>
</select>//Not working
May I know am i missing here anything? Any help would be appreciated. Thank you.
Use ng-init or set the default value to the model variable inside the controller,
$scope.BrandId = "1";
DEMO
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.register = {};
$scope.BrandId = "1";
$scope.brands = [{
id: "1",
name: "TOYOTA"
}, {
id: "2",
name: "HONDA"
}, {
id: "3",
name: "MARUTI"
}, {
id: "4",
name: "BMW"
}];
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
<div>
<select ng-init="BrandId=='1'" ng-model="BrandId" ng-options="brand.id as brand.name for brand in brands"></select>
</div>
</div>
</body>
</html>
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
I have the following code:
<html ng-app="myApp">
<head>
<title>Angular Demo</title>
<script src="angular/angular.min.js"></script>
<script src="js/controllers.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
</head>
<body>
<div ng-controller="myController">
<div ng-init="oras='Valcea'"></div>
<input type="text" ng-model="search"><br/><br/>
<select name="" id="" ng-model="eleviorder">
<option value="name">Nume</option>
<option value="prenume">Prenume</option>
<option value="age">Varsta</option>
<option value="highscool">Liceu</option>
<option value="luckynumber">Numar norocos</option>
</select>
Ordonare Nume:<label>
<input type="radio" name="direction" ng-model="direction" checked/>ascending</label>
<label>
<input type="radio" name="direction" ng-model="direction" value="reverse"/>descending
</label>
<ul>
<li ng-repeat="item in elevi | filter :search | orderBy :eleviorder :direction :myfunction">
<div>{{item.name}} {{item.prenume}}, Varsta:{{item.age}}, Liceu: {{item.highscool}}, Numar norocos: {{item.luckynumber}} Oras:{{oras}}</div>
</li>
</ul>
</div>
</body>
</html>
with this controller
var myApp = angular.module('myApp', []);
myApp.controller('myController',['$scope','$http',function ($scope,$http){
$http.get('js/data.json').success(function(data){
$scope.elevi = data;
$scope.eleviorder = 'name';
});
}]);
who get this data from data.json
[
{"name":"Udrea",
"prenume":"Alexandru",
"age":"27",
"highscool":"Henri Coanda",
"luckynumber":"7"
},
{"name":"Rizea",
"prenume":"Paul",
"age":"23",
"highscool":"Mircea Cel Batran",
"luckynumber":"11"
},
{"name":"Popescu",
"prenume":"Ion",
"age":"19",
"highscool":"Pedagogic",
"luckynumber":"17"
},
{"name":"Popescu",
"prenume":"Maria",
"age":"18",
"highscool":"Sanitar",
"luckynumber":"8"
},
{"name":"Muscalu",
"prenume":"Leonard",
"age":"22",
"highscool":"Forestier",
"luckynumber":"47"
},
{"name":"Ionescu",
"prenume":"Ema",
"age":"29",
"highscool":"Alexandru Lahovari",
"luckynumber":"26"
}
]
My problem is that i can't orderby the luckynumber in natural order it orders the luckynumber like this 11,17,26,47,7,8 instead of 7,8,11,17,26,47
That's because angularjs consider this field as being a string property. So it is ordered in the alphabetical order. If you remove the quotes from the values of the integer properties, it should be working.
[
{"name":"Udrea",
"prenume":"Alexandru",
"age":27,
"highscool":"Henri Coanda",
"luckynumber":7
},
{"name":"Rizea",
"prenume":"Paul",
"age":23,
"highscool":"Mircea Cel Batran",
"luckynumber":11
},...
]
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.