html code
<div ng-controller="DropdownCtrl as vm">
<select name="singleSelect" ng-model="data.model"
ng-change="vm.userSelect(data.model)"
ng-click="vm.loadTenantList()">
<option ng-repeat="tenant in vm.tenants" >{{tenant.name}}</option>
</select><br>
</div>
js code
$lmsapp.controller('DropdownCtrl',['tenantServices','dialogService',function (tenantServices,dialogService,$log){
var vm = this;
vm.tenants=[];
vm.loadTenantList=function(){
tenantServices.tenantList({},function(response){
vm.tenants=response.dataList;
});
};
vm.data = {
availableOptions: [
vm.loadTenantList()
]
};
}]);
how can I get the selected element?
you can get like this keep the id in the select option tag like below
<select name="singleSelect" ng-model="data.model"
ng-change="vm.userSelect(data.model)"
ng-click="vm.loadTenantList()" id="TenaList">
<option ng-repeat="tenant in vm.tenants" >{{tenant.name}}</option>
</select>
In your script
var e = document.getElementById("TenaList");
var selected_value = e.options[e.selectedIndex].value;
use this
<div ng-controller="DropdownCtrl as vm">
<select name="singleSelect" ng-model="vm.data"
ng-click="vm.loadTenantList()">
<option ng-repeat="tenant in vm.tenants" >{{tenant.name}}</option>
</select><br>
</div>
then you can get the selected item using vm.data
Rather use ng-options:
<div ng-controller="DropdownCtrl as vm">
<select name="singleSelect" ng-model="vm.selectedTenant" ng-init="vm.loadTenantList()"
ng-options="tenant as tenant.name for tenant in vm.tenants ">
</select>
</div>
vm.selectedTenant will give you selected tenant.
Related
I have array of city which is available on first select ng-change which I like to show in second option list;
But it does not show there.
In angular controller
mainApp.controller('addUserCtrl', function($scope,$http) {
$scope.getCities = function() {
$scope.citieslist = ["Nagpur", "Pune", "Latur", "Aurangabad"];
};
});
Select in HTML
<select ng-change="getCities()" ng-model="state" required>
<option value="Bihar">Bihar</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Delhi">Delhi</option>
</select>
<select name="city" required>
<option ng-repeat="city in citieslist">{{ city }}</option>
</select>
Thanks.
change it to
<select ng-repeat="city in citieslist" name="cityList" required>
<option >{{ city }}</option>
</select>
.controller('addUserCtrl', function($scope,$http) {
$scope.citieslist = ["Nagpur", "Pune", "Latur", "Aurangabad"];
$scope.getCities = function() {
$scope.citieslist = $scope.citieslist;
};
});
Try to use this code, you have assign a list inside getCities(), it will work at ng-change="getCities()" but can't assign value at ng-repeat. so you need to assign it out side method then you can assign it again inside method, then it will work. check the code in plunker
Change dropdown html code like below
<select name="citys" ng-repeat="city in citieslist" required>
<option>{{ city }}</option>
</select>
I already googled my problem but nothing really helped me.
I need an input field, which also works like a dropdown. So I can write my own data in the input field or select data from the dropdown. I tried with select but then I can only select data and can't write data in the input. That's why I used datalist.
I want to write my data from my array to my datalist like that:
index.html
<input type="text" ng-model="model.person.profession" list="professions"/>
<datalist id="professions">
<option ng-repeat="profession in professions" value="{{profession.id}}">{{profession.name}}</option>
</datalist>
app.js
$scope.professions = [
{'id':1, 'name':'doctor'},
{'id':2, 'name':'farmer'},
{'id':3, 'name':'astronaut'}
];
My data isn't shown in the dropdown. What am I doing wrong?
You can use ng-options for showing the value in drowpdown. Pleae take a look at this fiddle.
<select ng-model="selected">
<option ng-repeat="value in professions" value={{value.id}}>{{value.name}}</option>
</select>
angular.module('myApp', [])
.controller("dataListController", function ($scope){
$scope.professions = [
{'id':1, 'name':'doctor'},
{'id':2, 'name':'farmer'},
{'id':3, 'name':'astronaut'}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<main ng-app="myApp">
<section ng-controller="dataListController">
<input list="browsers" name="browser">
<datalist id ="browsers">
<option ng-repeat="x1 in professions" value="{{x1.name}}">
</datalist>
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<main ng-app="myApp">
<section ng-controller="dataListController">
<input list="browsers" name="browser">
<datalist id ="browsers">
<option ng-repeat="x1 in professions" value="{{x1.id}}">
</datalist>
</section>
</main>
Add Select element before option . And add track by $indexinside ng-repeat as well. Else for duplicate data, you will get error.
<select>
<option ng-repeat="value in professions track by $index " value="{{value.id}}">{{value.name}}</option>
</select>
or,
<select>
<option ng-repeat="(key, value) in professions " value="{{key.id}}">{{value.name}}</option>
</select>
DEMO: http://jsfiddle.net/HB7LU/28745/
Add ng-value instead of value in options
<option ng-repeat="profession in professions" ng-value="{{profession.id}}">{{profession.name}}</option>
Give your plunkr/code snippet
You can also try using ngOptions like this:
<select class="form-control" ng-model="selectedOption" ng-options="option.name for option in professions track by option.id">
There must be select instead of datalist :
<select>
<option ng-repeat="(key, value) in professions " value="{{id}}">{{value}}</option>
</select>
I have code like this
{"xyz":[{"a":1,"b":"","c":""}],
"pqr":["l","m"],
"abc":["1234","5678"]}
<div ng-model="item" ng-repeat="product in xyz">
<div>{product.a}</div>
<div>
<select>
<option ng-repeat="value in pqr">{{value}}</option>
</select>
</div>
<div>
<select>
<option ng-repeat="number in abc">{{number}}</option>
</select>
</div>
</div>
I want to update my object on changing the values in dropdowns and update the onject "xyz"!
try like this.
you should define model for select tag.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.data =
{
"xyz":[{"a":1,"b":"","c":""}],
"pqr":["l","m"],
"abc":["1234","5678"]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<div ng-repeat="(key,value) in data.xyz">
<div ng-repeat="(k,v) in value">{{v}}</div>
<div>
<select ng-model="model1" ng-options="v1 as v1 for v1 in data.pqr" ng-change="value.b = model1">
</select>
</div>
<div>
<select ng-model="model2" ng-options="number as number for number in data.abc" ng-change="value.c = model2">
</select>
</div>
</div>
</div>
First of all don't use ng-repeat on <option> use ng-options instead. Documentation and examples can be found here: https://docs.angularjs.org/api/ng/directive/ngOptions
As for your code, you will need to bind the select to your object:
<select ng-model="product.a" ...> //or which ever property you are trying to update
In html
<select class="element-margin-top" ng-model="vm.selectedRole" ng-options="(roleName,enabled) in vm.roleNames">
<option value="">All Roles</option>{{vm.roles[0]}}
</select>
I want to display all the array elements in select options.I dont understand what is going on in this.It is giving me error related to (roleName,enabled) in vm.roleNames
In js:
var vm = this;
vm.roleNames = ['SuperAdmin','Admin','Retailer','Manufacturer'];
vm.selectedRole = vm.roleNames[-1];
I want first element to be selected by default.
ng-options="(roleName,enabled) in vm.roleNames" in this case, vm.roleNames is an array, so, roleName is the index and enabled is the real "roleName"
So your code should looks like this:
<select class="element-margin-top" ng-model="vm.selectedRole" ng-options="(index,roleName) as roleName in vm.roleNames">
<option value="">All Roles</option>
</select>
try this , for first selected by defult you can use $first
<select ng-model="selectedRole">
<option ng-repeat="name in roleNames "
ng-selected="$first" value="{{name}}">{{name}}</option>
</select>
In html:
<select class="element-margin-top" ng-model="vm.selectedOption">
<option value="">All Roles</option>
<option ng-repeat="item in vm.optionNames" value="{{item}}">{{item}}</option>
</select>
in js:-
vm.optionNames = ['User', 'Account', 'Brand'];
vm.selectedOption = vm.optionNames[-1];
try reading http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/
So I have some data coming in a string seperated by commas.
sizes: "Small,Medium,Large,X Large,XX Large"
I got a drop down that displays value based on splitting that string.
<select ng-options="choice as choice for (idx, choice) in val.sizes.split(',')"
ng-change="selected.product.set.size(choice);>
<option value="">Please select a size</option>
</select>
Using ng-change: How do I pass the selected value choiceto a function?
You could use an ng-model and access it in your ng-change callback, or just pass it through.
<select ng-model="selectedSize" ng-options="choice as choice for (idx, choice) in val.sizes.split(',')"
ng-change="selected.product.set.size(selectedSize)">
<option value="">Please select a size</option>
</select>
angular.module('app', []).controller('ctrl', function($scope) {
$scope.sizes = "Small,Medium,Large,X Large,XX Large";
$scope.handleChange = function() {
console.log($scope.selectedSize)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="selectedSize" ng-options="choice as choice for (idx, choice) in sizes.split(',')" ng-change="handleChange()">
<option value="">Please select a size</option>
</select>
</div>
For me using ng-model with just a simple variable does not work! So $scope.selectedSize would return undefined for me and $scope.selectedSize = "what size ever" wouldn't change the select drop down's model.
Is this even possible to work this way (byValue / byRef variable)?
Using ng.model="whatever.selectedSize" and $scope.whatever.selectedSize works in my case for getting and setting the drop down's / the model's value.
This will surely help.
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<div ng-controller="manageroles_controller" ng-app="app_manageroles">
<select title="Update Role Hierarchy" name="cmb_role_hierarchy" id="cmb_role_hierarchy" ng-model="cmb_role_hierarchy" ng-change="updateRoleHierarchy('cmb_role_hierarchy');">
<option ng-init="cmb_role_hierarchy=5" value="5">5</option>
</select>
</div>
var app_manageroles = angular.module('app_manageroles',[]);
app_manageroles.controller('manageroles_controller', function($scope,$http) {
$scope.updateRoleHierarchy = function(cntRoleHierarchy) {
alert(cntRoleHierarchy);
}
});