I have dropdown using ng-model in angular2 and my view is not updating when I change the model
//intialize the variable
addplanhours:any[];
this.addplanhours=[{name: '--sel--',value:0}, {name: 'Head start',value:1}, {name: 'Nice going',value:2},{name: 'On Track',value:3},{name: 'Keep On trying',value:4},{name: 'Making process',value:5},{name: 'Wrapping up',value:6}];
//function of electrifyonchange
electrifyonChange(value) {
for(var i=0;i<=this.addplanhours.length;i++){
this.electrify= value;
console.log("new value",this.electrify);
}
<span>
<span class="addnotefont1">Electrifying</span>
<select class="addplanpicker"[(ngModel)]="electrify" (ngModelChange)="electrifyonChange($event)">
<option *ngFor="let a of addplanhours" [ngValue]="a.value">{{a.name}} </option>
</select>
</span>
[ngValue] can hold any kind of object or value, so you can use [compareWith] function to maintain the dropdown state because you are using object:
<select class="addplanpicker" [(ngModel)]="electrify" [compareWith]="isplanHourSelected">
<option *ngFor="let a of addplanhours" [ngValue]="a">{{a.name}} </option>
</select>
isplanHourSelected(o1, o2) {
return o1 && o2 && o1.value == o2.value
}
You will get electrify the selected object now, if you want to run a particular event when any value is selected in electrify then you can use OnChange strategy.
Related
When I'm using ng-model inside of ng-repeat it updates all ng-models inside that repeat loop. If I remove datatype and directly set to myCtrl.data[$index] it works fine.
Any suggestions?
template:
<div ng-repeat="i in myCtrl.data track by $index">
<div>
<div>
<select
ng-model="myCtrl.data[$index].datatype"
ng-options="item.value as item.label for item in myCtrl.detailTypes track by item.label"
>
<option value="" disabled selected>
select an option
</option>
</select>
</div>
</div>
</div>
controller:
self.detailTypes = [
{label: 'KEY_1', value: 'VAL_1'},
{label: 'KEY_2', value: 'VAL_2'},
];
self.data = new Array(2).fill({dataType: null});
When I select KEY_1 for first select, it changes object to [{dataType: 'VAL_1'}, {dataType: 'VAL_1'}]
Ok so this is happening because you are populating your self.data with Array.fill which when used with objects, passes by reference not value.
If you change declaration of your self.data to this
self.data = [];
self.data.push({dataType:null},{dataType:null});
it will work.
I got datalist such as below ,and color a color object with name and id properties.
<datalist id="opts">
<option ng-repeat="color in colors" value = "{{color.id}}">color.name</option>
</datalist>
My problem is that i want to run a function with the id and the name of the selected color. how can i access both of them without show the id on the view?
<button ng-click="someFunction(color.id,color.name)">button </button>
You should do it manually, as ng-options directive would be good option to go, but unfortunately it doesn't supported for datalist. To get selected value inside controller scope you need to add ng-model to datalist
Markup
<datalist id="opts" ng-model="selectedColor">
<option ng-repeat="color in colors" value = "{{color.id}}">color.name</option>
</datalist>
<button ng-click="someFunction(selectedColor)">button</button>
And then do filter on color collection inside controller someFunction
$scope.someFunction = function(){
var selected = $filter('filter')($scope.colors, {id: parseInt(selectedColor)}, true),
selectedColor;
if(selected){
selectedColor = selected[0];
}
}
Use Angular Expression to Bind {{color.name}} in option or use Value attribute
<option ng-repeat="color in colors" value = "{{color.id}}" ng-change="someFunction(color )">{{color.name}}</option>
You can also give a try to use ng-change in side the datalist
Example:
<datalist id="opts">
<option ng-repeat="color in colors" value = "{{color.id}}" ng-change="someFunction(color )">{{color.name}}</option>
</datalist>
Now With in the Function You can Access both the id and name...For this No need of submit button
$scope.someFunction = function(colorobj){
var colorid=colorobj.id;
var colorname=colorobj.name;
}
You can do as illustrated below.
Pass directly the object - 'color' and access the 'id', 'name', etc in the controller.
HTML:
<button ng-click="someFunction(color)">button </button>
JS:
$scope.someFunction = function (colorObj) {
// access colorObj.id, colorObj.name, etc.
}
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
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 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}}