I'm using this array on my controller:
var vm = this;
vm.documentGenerationEnum= [
{id:0, name: 'Manual'},
{id:1, name: 'Automatic'}
];
and I'm using this on the html
<select ng-model="vm.editable.DocumentGeneration"
ng-options="option.id as option.name for option in vm.documentGenerationEnum"
class="product-field-input dropdown">
</select>
Though I'm getting an empty dropdown which make no sense to me. I'm pretty sure that the code is well done, because this is not a new topic for me. But I'm not sure what other things could cause this to occur, what other things could I consider?
Works fine in this example:
angular.module("app",[])
.controller("ctrl", function() {
var vm = this;
vm.editable = {};
vm.documentGenerationEnum= [
{id:0, name: 'Manual'},
{id:1, name: 'Automatic'}
];
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl as vm">
<select ng-model="vm.editable.DocumentGeneration"
ng-options="option.id as option.name for option in vm.documentGenerationEnum"
class="product-field-input dropdown">
</select>
<br>Selection={{vm.editable.DocumentGeneration}}
</body>
Related
HTML script
<div>
<select ng-model="selectView">
<option value="empTable.html">Table View</option>
<option value="empList.html">List View</option>
</select>
<div ng-include="selectView"></div>
</div>
Angular script
var angScript = angular.module("multiselectapp",[]). controller ("multicontroller", function ($scope){
var empList = [
{ name:"sue", gender:"female" },
{ name:"Joe", gender:"male" }
];
$scope.employees =empList;
$scope. selectView ="empTable.html";
});
The empTable.html and empList.html has basic HTML script using ng-repeat to display the table and list view.
The angular script file is loaded and all paths are good to go having cross verified them with a $scope.message="file detected in html“ message which is displayed on HTML page.
But the table and list is not displayed at all.
Suggestions please!
Ng-include=" '{{selectedView}}' "
if its not gonna work try removing {{}}
Try out
<div ng-include src="selectView"></div>
It seems it works for me:
https://embed.plnkr.co/wFaG4m?p=preview
<body ng-controller="MainCtrl">
<p>selected item is : {{selectedItem}}</p>
<p> name of selected item is : {{selectedItem.name}} </p>
<select ng-model="selectedItem" ng-options="item.name for item in items"></select>
<div ng-include="selectedItem.name"></div>
</body>
var app = angular.module('plunker', []);
Js:
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.selectedItem = { name: 'a.html'};
$scope.items = [{name: 'c.html'},{ name: 'a.html'}];
});
$scope. selectView ="empTable.html";
Here unnecessary space is there between $scope and the variable name. Try removing space as below $scope.selectView ="empTable.html";
<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 have an array like $scope.years = ['1900', '1901', '1902'];
If I use <select ng-model="chosenYear" ng-options="choice for choice in years"></select>
I get
<option value="0">1900</option>
<option value="1">1901</option>
<option value="2">1902</option>
where index of the array becomes the 'value' of options. How can I have both value and label equal (both being 1900, 1902, 1902, etc) ?
A similar question has an accepted answer, but it doesn't do this thing at all.
Angular version : 1.2.16
What you want is <select ng-model="chosenYear" ng-options="choice as choice for choice in years"></select>
EDIT:
since above does not work in angular 1.2.16 try below
<select ng-model="chosenYear" ng-options="choice for choice in years track by choice"></select>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.years = ['1900', '1901', '1902'];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="chosenYear" ng-options="choice for choice in years track by choice"></select>
</div>
</body>
</html>
look at this, is similar with your case or you can just use ng-repeat and create value dynamically<option ng-repeat="option in selecteOptions" value="option">{{option}}</option>
Try this
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.years = [{
label: "1900",
value: "1900"
}, {
label: "1901",
value: "1901"
}, {
label: "1902",
value: "1902"
},
];
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a year:</p>
<select name="mySelect" id="mySelect" ng-options="option.label for option in years track by option.value" ng-model="selectedCar"></select>
<h1>You selected: {{selectedCar.label}}</h1>
</div>
</body>
</html>
If you don't mind using ng-repeat, use this instead:
<select ng-model="selectedItem">
<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
I'm struggling getting "selected" to work with 'track by' for Angular select element. I have the following select:
<select id="licenseType" ng-model="selectedLicense"
ng-options="key for (key, value) in licenseMap track by key"
ng-change="doUpdate()">
</select>
with this js:
$scope.selectedLicense = $scope.licenseMap["Please Select"];
The above js works when I get rid of 'track by key' - the initial selection gets preset. With 'track by key' in place the pre-selection is a blank. I need 'track by key' in place to get hold of selected value, it is the only thing that worked so far. I have tried teh following combination so far that did not work:
/*
var license = document.getElementById('licenseType');
license.options.selectedIndex = 1;
license.options[license.options.selectedIndex].selected = true;
$("#licenseType").val("Please Select");
$('#licenseType').children('option[value="1"]').attr('selected', true);
*/
I will most appreciate some help here getting it to work. Thank you.
do something like this: http://codepen.io/alex06/pen/XjarJd
div(data-ng-app="app")
div(ng-controller="appController")
select.form-control(ng-model="selectedItem", ng-options="option.value as option.name for option in typeOptions track by option.value" ng-init="selectedItem=typeOptions[0]")
(function(){
'use strict'
angular
.module('app', [])
.controller('appController', ['$scope', function($scope){
$scope.typeOptions = [
{ name: 'Feature', value: 'feature' },
{ name: 'Bug', value: 'bug' },
{ name: 'Enhancement', value: 'enhancement' }
];
}])
})()
The example is made in jade, but it's almost the same syntax.By the way, if you still want to work with an object instead of array you can also do this:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"> </script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
angular.module('app', [])
.controller('IndexCtrl', ['$scope', function($scope) {
$scope.types = {
1: "value1",
2: "value2",
5: "value3"
};
}]);
</script>
</head>
<body ng-app="app" ng-controller="IndexCtrl">
<select ng-model="type" ng-options="k as v for (k, v) in types">
<option value="">Please select</option>
</select>
</body>
</html>
I'm trying to get rid of the $$hashKey value that angular adds to your model value. According to most sources implementing a track by should solve this issue but I'm doing something wrong.
The vm.productTypes is any array of objects with id properties that are GUIDs.
Resulting model value...
$$hashKey: "object:445"
id: "9e695340-d10a-40ca-9cff-e9a93388912a"
name: "Medical"
type: 1
typeString: "ProductTypes"
HTML Code :
<md-select id="type" ng-model="vm.currentProduct.productType" name="type"
ng-model-options="{trackBy: '$value.id'}"
required>
<md-option ng-repeat="pt in vm.productTypes track by pt.id" ng-value="pt">
{{pt.name}}
</md-option>
</md-select>
Where am I going wrong?
Update:
Seems that the name attribute is causing this strange behavior. Bug?
http://codepen.io/anon/pen/LNpMYJ
Use ng-model-options="{ trackBy: '$value.id' }".
If you are getting list data through $http call, First prepare model object and then load list data.
Or prepare model object and put into an object which is holding hole form data
Link.
<html>
<head>
<title>$$HaskKey Remover</title>
<script src="https://code.angularjs.org/1.3.8/angular.min.js></script>
<script>
var myApp= angular.module('MyApp', []);
myApp.controller('MainCtrl', ['$scope',
function($scope) {
$scope.list = [
{key: "1", name: "Rose"},
{key: {id:2}, name: "Sachin"},
{key: {id:3}, name: "Sandy"}
];
console.log($scope.list);
}
]);
</script>
<head>
<title>Removing $$hashKey when using ng-options</title>
</head>
<body ng-app='MyApp'>
<div ng-controller='MainCtrl'>
<form>
<label for="Select Box">Make a choice of Players:</label>
<select name="selectBx" id="selectBx" ng-model="optionsData"
ng-options="item.name for item in list track by item.key">
</select>
</form>
</div>
</body>
</html>