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.
}
Related
hi all i am using angularjs ng-repeat i have checkbox and dropdown in inside the repeat now my need is when check the checkbox value i want bind the dropdown but now when i check the checkbox all dropdown values are changed but my need i want bind the dropdown based checkbox help how to solve
ng-repeat code
<div ng-repeat="BFMaterialStream in BFMaterialStreams">
<input type="checkbox" ng-change="checkchange(BFMaterialStream.MaterialStream,$index)"
ng-model="selection.ids[BFMaterialStream.MaterialStream]" name="group" id="BFMaterialStream.MaterialStream" />
{{BFMaterialStream.MaterialStream}}
<select id="MaterialElevator" tabindex="7" required typeof="text" name="Elevator"
form="DistanceMatrixFormId" class="form-control"
ng-model="ViewGetBUMaterialStream.ToElevator"
>
<option value=''>Select</option>
<option ng-repeat="ViewGetBUMaterialStream in ViewGetBUMaterialStreams "
value="{{ViewGetBUMaterialStream.ToElevator}}"
>
{{ViewGetBUMaterialStream.ToElevator}}
</option>
</select>
</div>
check change time bind code
$scope.checkchange = function(Stream, index) {
$http.get('/ViewGetBUMaterialStream/' + Stream ).then(function (response) {
$scope.ViewGetBUMaterialStreams = response.data;
});
}
Make $scope.ViewGetBUMaterialStreams as an array.
In HTML change the repeat as
<option ng-repeat="ViewGetBUMaterialStream in ViewGetBUMaterialStreams[$index]"
value="{{ViewGetBUMaterialStream.ToElevator}}">
In change your $scope.ViewGetBUMaterialStreams = response.data assignment as $scope.ViewGetBUMaterialStreams[index] = response.data
JS looks like this:
$scope.ViewGetBUMaterialStreams = [];
$scope.checkchange = function(Stream, index) {
$http.get('/ViewGetBUMaterialStream/' + Stream ).then(function (response) {
$scope.ViewGetBUMaterialStreams[index] = response.data;
});
};
You may want to use ng-options directive:
<select ng-model="ViewGetBUMaterialStream.ToElevator"
ng-options="stream.ToElevator as stream for stream in ViewGetBUMaterialStreams">
<option value=''>Select</option>
</select>
Here is a JSFiddle of a simple use case of ng-options
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.
I am trying to set the value of many select elements when a user presses a button.
I have tried the jQuery way:
vm.passAllInspections = function ($event) {
$(".tbl-inspections option[value=pass]").attr("selected", "selected");
console.log($event);
}
This works but does not update ng-model or even make it fire. I looked at this post which gives details on the input element. I could not get the trigger event to happen?
$('button').click(function(){
var input = $('input');
input.val('xxx');
input.trigger('input');
});
So then I tried to use the $compile directive $compile(vm)($scope); that doesn't work as I wasn't sure if it had to be the exact ng-model property?
Then I was looking at useing ng-click="vm.eicr.inspections='pass'" but wasn't sure how to apply it to every ng-model property.
How can I press a button and add pass to a list of dropdowns and fire the ng-model so the properties are all set.
You have your listbox:
<select data-ng-model="myValue">
<option value="1">value 1 </option>
<option value="2">value 2 </option>
<option value="3">value 3 </option>
</select>
You have a button:
<button data-ng-click="setListboxToValue('2')" value="Click me!"/>
When you click the button, you trigger this function:
$scope.setListboxToValue = function(value) {
$scope.myValue = value;
}
This will set your listbox to the value you want.
Full example code: jsFiddle
Let's say i have a drop drown list that i add dynamicly in my html template:
<button type="button" ng-click="addRow()" style="margin-bottom:5px;">Add cities </button>
<div ng-repeat="city in cities">
<select ng-model="cities_$index"
ng-options="n.id as n.name for n in citiesList"
class="form-control"
ng-required="true">
<option value="">-- Choose City --</option>
</select>
</div>
Angular Controller :
$scope.addRow = function () {
var newrow = [];
if ($scope.cities.length === 0) {
newrow.push({ 'cities': $scope.cities_0 });
}
else {
$scope.cities.forEach(function (row, key) {
var city= '$scope.cities_'+key; // in php i can do this
//but i dont know how to do it with Js/Angular
console.log('row' + city);
newrow.push({ 'cities': city});
console.log(newrow);
});
}
$scope.cities.push(newrow);
}
I tried this to retrieve the values from the cities selected but i have undefined values.
$scope.send = function () {
angular.forEach($scope.cities, function (value, key) {
console.log(value.id); // the id from the ng-options
};
In a regular html code i just add name="city" and i retrieve all the cities added in my input box. But how i can retrieve thoses cities from the ng-model in my controller ?
I know i'm doing something wrong, but since i'm new with angular i'm trying !!
Thank you
supposing that the key (city) is inside your datas array, you can do :
<div ng-repeat="data in datas">
<input type="text">{{data.name}}
</div>
ng-model is still unique. What you are missing here is that ng-repeat creates a child scope for each item. Therefore, the value of ng-model is unique for EACH child scope. ng-model doesn't behave the same way as plain HTML input and having multiple inputs with the same ng-model will only point to the same object in memory. And not, "add up" values to the property city as you would expect in plain HTML inputs.
If you are using the object datas in your ng-repeat, it's kind of common practice that your <input /> would bind to a item property of datas.
<div ng-repeat="data in datas">
<input type="text">{{data.city}}
</div>
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}}