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>
Related
I am working on something which requires to come up with different options for different selections as list in forms.
for example:
If I select DR9 in System field, it has to show only 100,400,500 clients. same for QR9 - only 400 and 500.
But in my case, it's showing(100,400,500,400,500) repetitively.
Here is my code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Password Reset
<form>
<br><label>System:</label>
<select ng-model="myVar">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<label>Client:</label>
<select>
<div ng-switch="myVar">
<div ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</div>
<div ng-switch-when="QR9">
<option>400</option>
<option>500</option>
</div>
</div>
</select>
</form>
</div>
</body>
</html>
You cant apply ng-switch to a div with options instead add ng-switch to a div and apply ng-switch-when to select
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Password Reset
<form>
<br><label>System:</label>
<select ng-model="myVar">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<label>Client:</label>
<div ng-switch="myVar">
<select ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</select>
<select ng-switch-when="QR9">
<option>400</option>
<option>500</option>
</select>
<select ng-switch-default>
<option>100</option>
<option>400</option>
<option>500</option>
</select>
</div>
</form>
</div>
</body>
</html>
The template can be simplified by using the ng-options directive:
angular.module("app",[])
.controller("ctrl", function($scope) {
$scope.myVar = "PR3";
$scope.otherOptions = otherOptions("PR3");
$scope.updateOtherOptions = function(myVar) {
$scope.otherOptions = otherOptions(myVar);
};
function otherOptions(myVar) {
switch (myVar) {
case "DR9": return [100,400,500];
case "QR9": return [400,500];
default: return [100,400,500];
};
};
})
<!DOCTYPE html>
<html>
<script src="//unpkg.com/angular/angular.js"></script>
<body>
<div ng-app="app" ng-controller="ctrl">
Password Reset
<form>
<br>
<label>System:</label>
<select ng-model="myVar" ng-change="updateOtherOptions(myVar)">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br>
Client options={{otherOptions}}
<br>
<label>Client:</label>
<select ng-model="otherSel" ng-options="sel for sel in otherOptions">
<option value="">Select...</option>
</select>
</form>
</body>
</html>
The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.
When an item in the <select> menu is selected, the array element or object property represented by the selected option will be bound to the model identified by the ngModel directive.
Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option.
For more information, see
AngularJS ng-options Directive API Reference
AngularJS API Reference - Using select with ngOptions and setting a default value
AngularJS ng-change Directive API Reference
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.
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
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);
}
});
I'm cloning with JQuery a select tag to let the user to fill some more fields:
original HTML:
<form method="post">
<select name="theName">
<option value="any">Any</option>
...
</select>
</form>
transformed HTML:
<form method="post">
<select name="theName">
<option value="any">Any</option>
...
</select>
<select name="theName">
<option value="other">Other</option>
...
</select>
</form>
The problem is that I'm getting only the second parameter in $_POST['theName'].
Should I rename all new select tags names?
You have to create an array of the name like this
<form method="post">
<select name="theName[]">
<option value="any">Any</option>
...
</select>
<select name="theName[]">
<option value="other">Other</option>
...
</select>
</form>
:)
use the html as
<select name="theName[]">
and in your $_POST['theName'] you will get the all select box value as an array.
Attribute name is not unique but in this case you will have an error because jquery will try to store all the values in one single variable re-assigning the value each time.
solution 1 :change the name
solution 2 :store your result in one list
try different names for both select boxes