How do i render the values inside dropdown(selectbox options).
I need to show 'header' and 'footer' names inside selectbox.
$scope.sections = [
{
"header":{
"background-color":"#fff",
"color":"#fff"
},
"footer":{
"background-color":"#fff",
"color":"#fff"
}
}
];
I tried in the following way but not working,
<select name="section" class="form-control" ng-model ="section">
<option ng:repeat="options[0] in sections">
{{options[0]}}
</option>
</select>
You need to iterate over keys instead of values.
<option ng-repeat="(option, val) in sections[0]">
{{option}}
</option>
Or with ng-options
ng-options="option for (option, val) in sections[0]"
see the plunker
http://plnkr.co/edit/FQEooL5wNh8Xl8GprT99?p=preview
Related
I am new to angular.
I have created a row with three select box. the add field adds same row with three select box. I want to fetch the value for Field1 , Field 2 & Field3 in same object for all rows.
I am using ngRepeat to generate the rows and each select box is an individual select directive.
You can easily bind the value of a select to an attribute of an object. Try something like this:
<select ng-model="myObject.firstValue">
<option ng-repeat="option in firstList" value="{{option.name}}">
{{option.name}}
</option>
</select>
<select ng-model="myObject.secondValue">
<option ng-repeat="option in secondList" value="{{option.name}}">
{{option.name}}
</option>
</select>
To bind an ng-model to a directive use this
app.directive('directive', function () {
return {
template: '<div><input type="text" ng-model="ngModel" /></div>',
replace: true,
scope: {
ngModel : '=',
},
};
});
from here: Passing ng-model in nested directives
So, it's very simple.
You have to use [$index] in ng-model for every field in order to make it unique so that your object can easily bind into all field.
<div ng-repeat="item in vm.object">
<select name="select1"
ng-model="vm.selectedValue1[$index]"
ng-options="field1 as field1.title for field1 in vm.field1(item)">
<option value="">Select Item</option>
</select>
<select name="select2"
ng-model="vm.selectedValue2[$index]"
ng-options="field2 as field2.title for field2 in vm.field2(item)">
<option value="">Select Item</option>
</select>
<select name="select3"
ng-model="vm.selectedValue3[$index]"
ng-options="field3 as field3.title for field3 in vm.field3(item)">
<option value="">Select Item</option>
</select>
</div>
I have a problem when I change the value of one dropdown on ng-change. It will changes the other dropdown value also even both dropdown ids are different.
anyone knows why its happening?
Below is my code:
<select class="form-control" id="Billable{{$index}}" ng-init="invoice.source_item=''" ng-model="invoice.source_item" ng-change="BillableItemDetails(invoice.source_item,$index)">
<option class="ng-binding" value="">Select Billable Item...</option>
<option class="ng-binding" ng-repeat="BillableItem in BilableItemsList" value="{{BillableItem.id}}">{{BillableItem.name}}</option>
</select>
use different ng-model variable with different dropdown
Here is Plnkr
HTML
<select ng-model="dd1_Value" ng-change="changedd(ddValue.key)">
<option ng-repeat="d in dd track by d.id">{{d.name}}</option>
</select>
<p>DropDown 1 : {{dd1_Value}}</p>
<select ng-model="dd2_Value">
<option ng-repeat="d in dd track by d.id">{{d.name}}</option>
</select>
<p>DropDown 2 : {{dd2_Value}}</p>
Controller
app.controller('MainCtrl', function($scope) {
$scope.dd = [
{id:1,name:'a'},
{id:2,name:'b'},
{id:3,name:'c'},
{id:4,name:'d'},
{id:5,name:'e'},
{id:6,name:'f'}
]
});
Change the value of ng-model="invoice.source_item" to a unique scope variable for each DropDown.
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>
Is there any way to filter a select-box without using ng-repeat or ngOptions in AngularJS via angular filters($filter).
I have a select-option code written like this:
<select>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
and an input box which will be used to filter the content in the options:
<input ng-model="myFilter">
you can use ng-if with a function.
<option ng-if="checkFilter('group1')" value="one">
and then in your controller
function checkFilter(value) {
return myFilter.filter(function (element) { return element == value });
}
I have a problem to read the information selected that is propagate in a select.
<div ng-show="deviceDetail != null" ng-model="example" >
<select >
<option value="NONE">Select</option>
<option ng-repeat="option in deviceDetail" ng-change="selectOption()">{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
</div>
this is the HTML code and in the {{example}} I want to see the information that the user selected.
this is the part of the js releted:
$scope.selectOption = function() {
$scope.example = option.productName;
};
How I can fix it?
Thanks a million!
Set your example scope variable directly in <select> instead calling ng-change event and assigning into that function.
You can directly set option.name to example model with the use of ng-options too.
Here You have applied ng-model directive to div tag.
<div> is not input element so apply ng-model to <select> element here.
I would suggest to use ng-options directive for filling the selection list in <select>. ng-repeat is also fine.
Here you are binging ng-change event so in the function if requires then you can pass the object on which event is triggering so you can use that object or perform any operation on that.
Below is the modified template.
<div ng-show="deviceDetail != null">
<select >
<option value="NONE">Select</option>
<option ng-model="example" ng-options="option in deviceDetail" ng-change="selectOption(option)">{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
</div>
You should to pass current option:
<select >
<option value="NONE">Select</option>
<option ng-repeat="option in deviceDetail" ng-change="selectOption(option )">{{option}}</option>
</select>
$scope.selectOption = function(option) {
$scope.example = option; // is there property .productName?;
};
Try this:
<div ng-show="deviceDetail != null">
<select >
<option value="NONE">Select</option>
<option ng-model="option" ng-options="option in deviceDetail" ng-change="selectOption(option)">
{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
Js:
$scope.selectOption = function(option) {
$scope.example = option;
};
You should use ng-options
The value of the selection is: {{example}}