I am a pretty new to Angularjs and am having an issue on my select
I have populated my select fields but when I want to show what has been selected from the json I can only pull out the one value. I need both the name and the type but in 2 different places in my webpage
Fiddle is http://jsfiddle.net/ktcle/9Ymvt/1455/
<div ng-controller="MyCtrl">
<select ng-options="style.name as style.name for style in styles" ng-model="style">
<option style="display:none" value="">select a style</option>
</select>
<h2>selected: {{style}}</h2>
<h3>type: {{styles.type}}</h3>
</div>
and
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.styles = [
{
name: "Red",
code: "123",
type: "t-shirt"
},
{
name: "Yellow",
code: "456",
type: "vest"
},
{
name: "Green",
code: "789",
type: "jumper"
},
];
}
Specify the entire style object as the value in your ng-options expression. And, bind ng-model to something defined outside of ng-options.
<select ng-options="style as style.name for style in styles" ng-model="selected.style">
http://jsfiddle.net/9Ymvt/1456/
Two things:
Rewrite your ng-options as "style.name for style in styles". The way you have it will display style.name and select style.name. You want to select style in stead
For type your styles variable is mistakenly pluralized. Should be: <h3>type: {{style.type}}</h3>
<div ng-controller='MyCtrl'>
<select ng-options="style.name for style in styles" ng-model="style">
<option style="display:none" value="">select a style</option>
</select>
<h2>selected: {{style}}</h2>
<h3>type: {{style.type}}</h3>
</div>
Here's your updated jsFiddle: http://jsfiddle.net/mnibecker/B2wJ4/
Related
<select ng-model="machineSelected"
ng-options="machine._id as machine.name for machine in machineList"
ng-change="onChangeMachine(machineSelected)"
ng-disabled="!mineSelected">
<!--<option value=""></option>-->
<option value="">Select</option>
</select>
When I add
$scope.machineSelected = "";
dynamically wherever in the controller, option in drop-down should set as "Select", but it is not updating.
Use null or undefined, not an empty string, as the "not selected" value.
That's what the docs say:
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. See example below for demonstration.
It's not really clear that an empty string can't be used, but at least they mention null.
Set default option in controller and dynamically change based on selected item
<select ng-model="selectedItem" ng-change="getSelectedText()">
<option >All Items</option>
<option >Active Subscriptions Only</option>
<option >Expired Only</option>
</select>
Controller
app.controller('SelectedTextController', function ($scope) {
$scope.selectedItem = "All Items";
$scope.getSelectedText = function () {
var selectedItem=this.selectedItem;
};
});
Use null for the unselected value:
̶$̶s̶c̶o̶p̶e̶.̶m̶a̶c̶h̶i̶n̶e̶S̶e̶l̶e̶c̶t̶e̶d̶ ̶=̶ ̶"̶"̶;̶
$scope.machineSelected = null;
The ng-options directive was re-factored with AngularJS V1.6. Before then the default could be selected with an empty string. Now the default is selected by assigning null to the model.
For more infomation, see
AngularJS API Reference - Using select with ngOptions and setting a default value
AngularJS ng-options Directive API Reference
AngularJS Developer Guide - Migrating to V1.6 - select directve
ng-options is hiding the blank value with AngularJS V1.5
The DEMO
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.machineList = [
{ _id:1, name: "Megatron" },
{ _id:2, name: "Starscream" },
{ _id:3, name: "Shockwave" },
];
$scope.machineSelected = null;
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<select ng-model="machineSelected"
ng-options="machine._id as machine.name for machine in machineList"
ng-change="onChangeMachine(machineSelected)">
<option value="">Select</option>
</select>
<br>
machineSelected={{machineSelected}}
</body>
I currently have this:
<div>
<label for="market-type">Market Type</label>
<select id="market-type" type="text" ng-model="tradingFee.market_type">
<option value="stock">Stock Market</option>
<option value="otc">OTC Market</option>
</select>
</div>
which assigns the selected option's value to tradingFee.market_type. What I wish is to be able to do this plus assign the selected option's text to tradingFee.market_type_human_friendly_text, for example. Only being able to do one of the assignments is not enough. Is this possible somehow?
You could do this, but not with this syntax. use ng-options so that the ng-model holds both value and display name.
In your controller set array of objects:
$scope.marketType = [{id:"stock", displayName:"Stock Market"}, {id:"otc", displayName:"OTC Market"}];
and
<select id="market-type" type="text"
ng-model="tradingFee.market_type"
ng-options="mt.displayName for mt in marketType track by mt.id">
<option value="">--Select--</option>
</select>
Now the ng-model will have both id as well as value. i.e example:
tradingFee.market_type will be {id:"otc", displayName:"Stock Market"} if you select that specific item from the dropdown. With this you do not have to worry about maintaining 2 separate properties for displayName and id.
angular.module('app', [])
.run(function($rootScope) {
$rootScope.marketType = [{
id: "stock",
displayName: "Stock Market"
}, {
id: "otc",
displayName: "OTC Market"
}];
$rootScope.tradingFee = {
market_type: {
id: 'stock'
}
};
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app">
<select id="market-type" type="text" ng-model="tradingFee.market_type" ng-options="mt.displayName for mt in marketType track by mt.id">
<option value="">--Select--</option>
</select>
{{ tradingFee.market_type }}
</div>
You could just use ng-change on your select to fire a custom event handler that sets the secondary value.
<select id="market-type" type="text" ng-model="tradingFee.market_type"
ng-change="updateSecondary()">
<option value="stock">Stock Market</option>
<option value="otc">OTC Market</option>
</select>
I have read on many occasions that Angular tends to add an empty option at the beginning of the select element if the value of the model does not exist among the offered options.
However, I have a model whose value is set to 0 from the start, and 0 is provided as one of the options in the select element as well, yet there is still one empty option above my own options. It disappears after the actual option whose value is 0 gets selected.
Why is this and how do I get rid of it?
A very simple example of the problem I am experiencing is displayed here: http://jsfiddle.net/yuvnz7wr/
The javascript code:
var app = angular.module('Module', []);
app.controller('Test', function ($scope) {
$scope.model = 0;
$scope.options = [{
id: 0,
name: 'Zero'
}, {
id: 1,
name: 'One'
}];
});
The HTML code:
<div ng-app="Module">
<div ng-controller="Test as test">{{model}}
<select ng-model="model">
<option ng-repeat="option in options" ng-value="option.id">{{option.name}}</option>
</select>
</div>
</div>
You better use ng-options and ng-init directives for <select> with angular:
<div ng-app="Module">
<div ng-controller="Test as test">{{model}}
<select ng-model="model" ng-init="model = options[0].id" ng-options="option.id as option.name for option in options"></select>
</div>
</div>
For example I would like to do something like this:
<select ng-model="persons">
<option value="person1">Anna Smith</option>
<option value="person2">Karl Pettersson</option>
<option value="person3">Ylvis Russo</option>
</select>
<p ng-view="persons"><p>
And having the view display each name when selected in the dropdown rather than it's value. Is it possible?
I tried watching the model and assigning a new model the text value with jQuery. However it ended up being complicated so if that's the best way to do it, I small example would be awesome!
You just need to define your persons object and then you can do whatever you want with it. There are many ways to do it... Here's an example:
HTML
<select ng-model="persons"
ng-options="p as p.label for p in persons">
</select>
<p ng-repeat="p in persons">
{{p.value}}: {{p.label}}
</p>
JS
$scope.persons = [
{ value: 'person1', label: 'Anna Smith' },
{ value: 'person2', label: 'Karl Pettersson' },
{ value: 'person3', label: 'Ylvis Russo' }
];
Here is a jsfiddle: http://jsfiddle.net/bKHh8/
UPDATE
Here it is with option tags which don't use angular indices for values (this is exactly what answers your question): http://jsfiddle.net/bKHh8/1/
<select>
<option ng-repeat="p in persons" value="{{p.value}}">{{p.name}}</option>
</select>
I need to bind complex objects via a select box.
I'm aware of ng-options, but I cannot use template expression in ng-options. I would need to add field with the displaytext to every object in my controller like in this fiddle. That would mean I would need to change logic/code for the presentation. This is a bad seperation of concerns.
Is there any way to bind complex objects with a select box not using ng-options? I need to write the displaytext declarative in the template like there:
<select name="myObject" ng-model="myObject.sub">
<option ng-selected="!myObject.sub.id"></option>
<option value="" translate="myObject.sub.self" ng-selected="myObject.sub.id == -1">
<option ng-repeat="option in subselect.data" value="{{option}}" ng-selected="option.id == myObject.sub.id">
{{option.id}} {{option.shortName}} {{ option.comment }}
</option>
</select>
currently this is binding the string [object Object], because of the interpolation in the value attribute.
Using a small helper function with ng-change you can capture the index of the selected item to obtain the full object.
HTML
<label ng-controller="CompanyController" for="ci-company_sid">
Company:
<select ng-model="selectedCompanyIndex" ng-change="update(companysData.companys)">
<option ng-repeat="c in companysData.companys" value="{{$index}}" ng-selected="c.company.sid == selectedCompany.company.sid">{{c.company.company_name}} - {{c.company.link}}</option>
</select>
<hr>
{{selectedCompany.company.link}}
</label>
Controller:
function CompanyController($scope, $http) {
$scope.companysData = {
"companys": [{
"company": {
"link": "\/company\/8256606980000143017",
"sid": "8256606980000143017",
"company_name": "Company 29"
}},
{
"company": {
"link": "\/company\/8256603960000178016",
"sid": "8256603960000178016",
"company_name": "Company 1"
}}]
}
$scope.update = function(dataSet){
$scope.selectedCompany = dataSet[$scope.selectedCompanyIndex];
}
$scope.selectedCompany = $scope.companysData.companys[0];
}
http://jsfiddle.net/XzfVZ/3/