I would like to set a default value to my select component using angular ng-options
I have seen other topics about this question but i try to use it in my case but not solve..
So i have a select component
<select ng-options="dis.entidade.idEntidade as dis.entidade.nome for dis in distritos" ng-model="distrito.entidade.idEntidade" class="form-control">
<option></option>
</select>
and i would like to set a defaul value.
You can to set at no-model property. Example:
$scope.distrito.entidade.idEntidade = $scope.distritos[0].entidade.idEntidade;
angular.module('app', []).controller('select', function($scope) {
$scope.distrito = {};
$scope.distrito.entidade = {};
$scope.distritos = [{
entidade: {
nome: 'test1',
idEntidade: 1
}
}, {
entidade: {
nome: 'test2',
idEntidade: 2
}
}];
$scope.distrito.entidade.idEntidade = $scope.distritos[0].entidade.idEntidade;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="select">
<select ng-options="dis.entidade.idEntidade as dis.entidade.nome for dis in distritos" ng-model="distrito.entidade.idEntidade" class="form-control">
</select>
</div>
In your controller you can set $scope.distrito.entidade.idEntidade = "defaultValue". Your ng-model is the selected value, so if you don't initialize it in your controller, the value will be undefined. If you set a value to the relevant model during initialization, this will be the default selected value.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.somethingList = [];
$scope.somethingList.push("Something1");
$scope.somethingList.push("Something2");
$scope.somethingList.push("Something3");
$scope.selectedSomething = $scope.somethingList[0];
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-options="something for something in somethingList" ng-model="selectedSomething"></select>
</div>
</body>
</html>
<select ng-options="dis.entidade.idEntidade as dis.entidade.nome for dis in distritos" ng-model="distrito.entidade.idEntidade" class="form-control">
<option>THIS IS YOUR DEFAULT VALUE</option>
If you want to have a default value with some meaning you should do it in your controller, eg:
if (!$scope.distrito.entidade.idEntidade)
$scope.distrito.entidade.idEntidade = 'Some default value';
Related
I am trying to get the user selected value from select list using ng-change, but i can't seem to find what went wrong:
Everytime i select any other option i get "Sam" , my question is how can i get the userselected value instead of the default one "Sam"
Here is the html:
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<p> Employee Name/Employee ID:
<select ng-model="pickEmp" ng-change="setEmployee(pickEmp)">
<option ng-value="James">James</option>
<option ng-value="Sam">Sam</option>
<option ng-value="Patrick">Patrick</option>
</select>
</p>
</div>
</body>
and here is the JS
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.formObject = {
empId:'Sam',
que1:{
status:'YES',
payBand:0-11
}
$scope.setEmployee = function(){
$scope.pickEmp = $scope.formObject.empId;
}
Inside the setEmployee function, you are setting the ng-model as value sam. remove that line.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.formObject = {
empId:'Sam',
que1:{
status:'YES',
payBand:0-11
}}
$scope.setEmployee = function(){
console.log($scope.pickEmp)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<p> Employee Name/Employee ID:
<select ng-model="pickEmp" ng-change="setEmployee(pickEmp)">
<option ng-value="James">James</option>
<option ng-value="Sam">Sam</option>
<option ng-value="Patrick">Patrick</option>
</select>
</p>
</div>
</body>
I'm a very begginer in AngularJS(1.6) and I need to filter some results from a selected option.
I have to filter cities from states, and until there i'm doing fine. But then I need to filter and show the stores in this city on a list. Does anyone knows how to do It?
My code:
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body data-ng-controller="testController">
<select id="state" ng-model="stateSrc" ng-options="state for (state, city) in states" ng-change="GetSelectedState()">
<option value=''>State</option>
</select>
<select id="city" ng-model="citySrc" ng-options="city for (city,store) in stateSrc" ng-change="GetSelectedCity()" ng-disabled="!stateSrc">
<option value=''>City</option>
</select>
<select id="city" ng-model="store" ng-options="store for store in citySrc" ng-disabled="!stateSrc || !citySrc">
<option value=''>Store</option>
</select>
<script>
angular
.module('myApp', [])
.run(function($rootScope) {
$rootScope.title = 'myTest Page';
})
.controller('testController', ['$scope', function($scope) {
$scope.states = {
'STATE_1': {
'City_1': ['Store_1', 'Store_2'],
'City_2': ['Store_3', 'Store_4']
},
'STATE-2': {
'City_3': ['Store_1', 'Store_2'],
'City_4': ['Store_3', 'Store_4']
}
};
$scope.GetSelectedState = function() {
$scope.strState = $scope.stateSrc;
};
$scope.GetSelectedCity = function() {
$scope.strCity = $scope.citySrc;
};
}
])
</script>
</body>
</html>
Thank's a lot!
It would be really helpful if you posted what your data source looks like. Assuming citySrc has objects containing arrays of stores, I would set a selectedCity in your controller when you call GetSelectedCity(), and then:
<ul>
<li ng-repeat="store in selectedCity.store">{{store}}</li>
</ul>
This will create list items for each store in your selectedCity object.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myctrl', function($scope) {
$scope.state = [{name:'TamilNadu', code:1}, {name:'Kerala', code:2}, {name:'Karnataka', code:3}];
$scope.onChange = function() {
var a = this.drop.state; }
});
</script>
<body>
<div ng-app="myApp" ng-controller="myctrl">
State :
<select id="stat" ng-model="drop.state" ng-change="onChange()">
<option ng-repeat = "x in state"> {{x.name}} </option>
<select>
</div>
</body>
In this code, I can be able to get the selected value from the textbox in the variable a. Now, I need to get the code value of the name selected. Is it possible using indexof(). And I need it in dynamic ie., when the 'state' is selected I need that corresponding 'code' from the array set.
<option value="{{x}}" ng-repeat = "x in state"> {{x.name}} </option>
If you add the value on your Option, you may get the complete object, and accessing the code and the Value
you can assign code as value to option
<option ng-repeat = "x in state" ng-value="x.code"> {{x.name}}
Demo
var app = angular.module('myApp', []);
app.controller('myctrl', function($scope) {
$scope.drop = {}
$scope.state = [{name:'TamilNadu', code:1}, {name:'Kerala', code:2}, {name:'Karnataka', code:3}];
$scope.onChange = function() {
var a = $scope.drop.state
console.log(a)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myctrl">
State :
<select id="stat" ng-model="drop.state" ng-change="onChange()">
<option ng-repeat = "x in state" ng-value="x.code"> {{x.name}} </option>
</select>
</div>
Even though the other answer is valid, this is the right way to go about it:
<select id="stat" ng-model="drop.state" ng-options="x.code as x.name for x in state" ng-change="onChange()">
<option value="">Select a value</option>
</select>
If the purpose of the ng-change was to get the state code, this way it's not needed. Your ng-model will be equal to the selected state code.
You can bind data to a single property., and can access both. with preferred ng-options .
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myctrl', function($scope) {
$scope.state = [{
name: 'TamilNadu',
code: 1
}, {
name: 'Kerala',
code: 2
}, {
name: 'Karnataka',
code: 3
}];
$scope.onChange = function() {
alert(this.drop.state.name);
alert(this.drop.state.code);
}
});
</script>
<body>
<div ng-app="myApp" ng-controller="myctrl">
State :
<select id="stat" ng-model="drop.state" ng-options= "x as x.name for x in state" ng-change="onChange()"> </select>
</div>
</body>
I was trying simple select drop down in my app. Where I have set a default value in ng-model. But on load the drop down does not select the ng-model value.
Below are my codes:
HTML:
View <select ng-model="viewby" ng-change="setItemsPerPage(viewby)"><option>3</option><option>5</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option></select> records at a time.
Js:
$scope.viewby=3
$scope.setItemsPerPage = function(num) {
console.log( num);
}
Here ng-change is working perfectly.
Here '3' should be selected on load. I tried ng-init and selected='selected' also and both are not working. Any suggestion will help.--thanks
Try like below snippet. Here default selected option was 20, you can change it to your need.
var app = angular.module('app', []);
app.controller("ctrl", function($scope) {
$scope.selectedOption = 20;
$scope.setItemsPerPage = function(num) {
console.log(num);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
View
<select ng-model="selectedOption" ng-change="setItemsPerPage(selectedOption)">
<option>3</option>
<option>5</option>
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
</select>
records at a time.
</div>
</div>
In angular, Better way is to define the options as array and bind them, so that ng-model will get updated.
JS:
$scope.model = 30;
$scope.options = [10, 20, 30,40,50];
HTML
<select ng-change="setItemsPerPage(model)" ng-model="model" ng-options="value for value in options"></select>
DEMO
I have a select drop down in Angular based HTML like below. The requirement is to filter the drop down values based on the text the user enter in a text input box. The drop down value in this select is op
How do I add the filter.
<select class="form-control" size="12" data-ng-model="selItem.SelectedItems"
ng-options="option as displaycodeandlabel(option,selItem.isCodeonLabel)disable when option.disabled==true for option in ::a.sData"></select>
Not sure about your data structure, but generally you can just use the native filter.
Here's a working demo:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.a = {};
$scope.a.sData = [
{
"vm":"0000",
"dm":"U.S. city average",
"disabled":false
},
{
"vm":"0100",
"dm":"Northeast urban",
"disabled":false
},
{
"vm":"0200",
"dm":"Midwest urban",
"disabled":false
}
];
$scope.displayCodeandLabel = function(item, displayCode) {
return displayCode ? item.vm + " " + item.dm : item.dm;
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-controller="MainCtrl">
<div class="col-md-12">
<label for="search">Search</label>
<input type="text" id="search" class="form-control" placeholder="Search" ng-model="search">
<hr>
<select class="form-control" size="12" data-ng-model="selItem.SelectedItems" ng-options="option as displayCodeandLabel(option, selItem.isCodeonLabel)
disable when option.disabled == true for option in a.sData | filter: search"></select>
</div>
</body>
</html>