I have an array of objects
and i have a dropdown box with these names in with a text box to show the value that is inside the object that is selected
I have the input box set to
<input type="text" class="form-control" ng-model="o.boxes.box1[0]">
is there a way to set "box1[0]" to the selected dropdown value? the dropdown box is selectedNumber. I tried ng-model="o.boxes.{{selectedNumber}}[0]" but this didnt work.
ng-model="o.boxes.{{selectedNumber}}[0]"
You can do what you want with just a lit refactor of your code.
The best way to do this should be: update input ng-model reference with the current selection of your dropdown.
In your Controller:
$scope.boxes = {
box1: [],
box2: [],
box3: []
}
$scope.selectedBoxModel = null;
$scope.onDropdownSelection = function (selectedBox) {
$scope.selectedBoxModel = selectedBox;
}
And in your template on your input you will reference the ng-model with the selected box:
<input type="text" class="form-control" ng-model="selectedBoxModel[0]">
Try giving run time expression evaluation as shown below.
ng-model="o.boxes[{{selectedNumber}}][0]"
Related
I have a request that returns an array of objects based on a Provider selected. Like this:
data:[
0:
Producto:"Chiken",
Unidad: "box",
PrecioUnitario:"34334",
etc..
1:
Producto:"Chiken",
Unidad: "box",
PrecioUnitario:"200",
etc..
]
I'm displaying the data properly in a <select> tag
What I want is that if the user selects let's say "Carne Asada" all of the other properties of that selected child object are auto-selected on the rest of the fields, i.e:
Unidad text input should be "box" automatically, "precioUnitario" field should be 200.
Or visually:
Another thing is that it should display the value that the object has but it can be edited by the user.
Controller:
$scope.columns = [{colId: 'col1', producto:[], catidad:'', unidades:[], preunit:''}];
$scope.fact = {};
$scope.get_proveedor_prod = function(fact){
var data = {ProveedorID: fact.ProvID};
$http.post(URL + "/api/get_prod_by_provider.php",data).then(function(callback) {
$scope.products = callback.data;
});
}
View:
<md-input-container>
<select ng-model="fact.producto"
ng-options="item.ProductID as item.NombreProducto for item in products"
class="form-control selectformcc" required>
<option value="" disabled selected>Producto</option>
</select>
</md-input-container>
(I'm assuming your data notation is incorrect and that you meant to use an array of objects.)
Bind the select to the whole item instead of to a property of the item:
ng-options="item as item.NombreProducto for item in products" //not ="item.ProductID...
Now fact.producto (select model) is an object and will contain the whole item. In your Unidad text box you can use:
<input type="text" ng-model="fact.producto.Unidad" />
Here is an example with easy to understand data: Working Fiddle
So I have an Angular 5 Material Data Table with on it 2 filter options, one via text input and one via dropdown to filter on a particular field value. For the dropdown I use a "mat-select" Angular Material item with in it 2 mat-options, one empty and one based on an array I have, like so:
<div class="filterContainer" *ngIf="showDataForm">
<mat-form-field>
<input #matInputSearch matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
</mat-form-field>
</div>
<div class="filterSelectContainer" *ngIf="showDataForm">
<mat-select placeholder="Search EADDPStage" (selectionChange)="applySelectFilter($event)">
<mat-option></mat-option>
<mat-option *ngFor="let stage of EADDPStages[0]" [value]="stage">
{{stage}}
</mat-option>
</mat-select>
</div>
Here you can see my .ts code file for these:
#ViewChild(MatSelect) set contentSelect(contentSelect: ElementRef) {
this.select = contentSelect;
}
#ViewChild('matInputSearch') set matInputSearch(matInputSearch: ElementRef) {
this.matInputSearchField = matInputSearch;
}
public applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
this.dataSource.filter = filterValue;
}
public applySelectFilter(event) {
// This is to reset dropdown filter to empty/no filter
if (event.value == null) {
event.value = '';
}
this.applyFilter(event.value);
// set the "Search" field filter to empty string
this.matInputSearchField.nativeElement.value = '';
}
What happens now in my UI is that both filters work correctly, but I want to "reset" (visually) the filters as well. Now when I type in something in my text-box filter and then select something from my dropdownlist, the text box filter's value will be set to empty as to indicate you're now filtering on the dropdown and no longer on the text input filter field, the following line does this:
this.matInputSearchField.nativeElement.value = '';
But now I want the other way to work as well. If I select a dropdown filter, it filters, but then when I want to type something in my text input filter field, the filter also works correctly but the dropdown selected option will still be the previously selected value (even though it's filter no longer applies). What I want is that in this scenario, when I type something in the text input filter field, that my select dropdown will go back to the empty option I've added in my HTML as to indicate you're no longer filtering on the dropdown selection but on what the user typed in in the input filter field.
What I basically need is a way to do something like this (this is wrong code btw but just an indication):
this.select.selectedOption('mat-option-0');
Where I select my "mat-select" item on my HTML and give it a selected option or default option of the one I want, in this case my 'mat-option-0' is the ID if the empty you see in my HTML.
Is there a easy way of doing this?
I haven't tested it but try this, should work:
Make below changes in
HTML:
<mat-select placeholder="Search EADDPStage" (selectionChange)="applySelectFilter($event)" [(ngmodel)]="stageValue">
<mat-option></mat-option>
<mat-option *ngFor="let stage of EADDPStages[0]" [value]="stage">
{{stage}}
</mat-option>
and Component:
stageValue = '';
public applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
this.dataSource.filter = filterValue;
this.stageValue = '';
}
[(ngmodel)]="stageValue" sets the selected value for mat-select.
I have this input:
<input type="checkbox" ng-model="area.id" data-id="{{area.id}}"/>
and some ng-click action above, I'm trying to collect all selected checkboxes id's but after check action data-id attribute turns to true/false, why?
Function from controller:
collectSelectedAreas($event) {
let selectedArea = $event.currentTarget.querySelectorAll('input:checked');
let areaIds = [];
[selectedArea].forEach((el) => {
console.log(el.attributes['data-id'].value);
});
}
Option 1:
You could select another property to track the checkbox value (true/false) like this:
<input type="checkbox" ng-model="area.selected" data-id="{{area.id}}"/>
area.selected = true in case of checkbox is selected
Then in your function, iterate over your area's Array, lets suppose you have an arrayOfAreas, the same array that you are iterating in your ng-repeat
collectSelectedAreas() {
let areaIds = [];
arrayOfAreas.forEach((el) => {
if (el.selected){
areasId.push(el);//Add selected element to array
console.log(el.id);
}
});
}
Option 2:
<input type="checkbox" ng-model="area.selected" data-id="{{area.id}}" ng-true-value="area.id" ng-false-value="'NO'"/>
It means that when checkbox is checked area.selected will take the area.id value, otherwise the string 'NO';
You need not to access DOM for getting selected checkbox. You can check this by checking the model value area.id . It will contain true for if checkbox is selected. Then you can traverse through area object, where you can get key to identified the id of selected checkbox.For Eg.
<input type="checkbox" ng-model="area.id" />
where
$scope.area.id==true if checkbox is selected.
I have an ng-options iterating over an object, the key of this object is the value I need the ng-options to be set to.
I set the ng-model in my controller to default the select box.
Using track by breaks the ng-model default, however stopping track by removes the issue but introduces another where the default of the select box is no longer the key of the object.
How can I get around this issue?
The HTML I am using is as follows
<select
class="form-control"
ng-change="flightNumber = airline[0]"
name="airline"
id="airline"
ng-model="airline"
ng-options="airline for (airline, flights) in orderedFlights track by airline">
</select>
In my controller I have the following:
var flights = {
"Airline": {
},
"Airline 2": {
},
"-- No Airline Selected --": [
{
unselected: true
}
];
}
$scope.orderedFlights = flights;
$scope.airline = flights["-- No Airline Selected --"];
I have this AngularJS code
var app = angular.module('testApp', []);
app.controller('testController', function ($scope) {
$scope.MyTypes = [
{ name: 'Option1', value: 100 },
{ name: 'Option2', value: 101 },
{ name: 'Other', value: 102 }
];
$scope.SelectedType = $scope.MyTypes[0];
$scope.SelectedValue = $scope.MyTypes[0].value;
$scope.onChange = function () {
$scope.SelectedValue = $scope.SelectedType.value;
}
});
with this HTML
<div ng-app="testApp">
<div ng-controller="testController">
<select ng-model="SelectedType" ng-options="ft.name for ft in MyTypes" ng-change="onChange()"></select>
<input type="text" value="{{SelectedValue}}"/>
</div>
</div>
This displays the value in the input box, taken from the selected item of the Select list as when items are selected from the list.
This code works fine until user types something in to the input textbox, then the binding is lost and the text box value does not get updated.
Is this a normal behavior in AngularJS?. How to overcome this and get it working (replace the entered text with the value from the select list when different item is selcted) even after the user types something in?
Demo Fiddle
To get the desired effect you should bind the input to the SelectedValue using ng-model rather than having an interpolated value in the value attribute:
<input type='text' ng-model='SelectedValue' />
The key to the behaviour you're seeing is that the value attribute on the input is the initial value of the control not the value of the input.
As soon as you enter text into the input field, whatever is in the value attribute is no longer relevant. The value attribute will contain the new value but it will not affect the value in the control (have a look in a DOM inspector).
It's not normal behavior, You need to bind your text box. your are just setting the value in you text box but not binding like this
<input type="text" ng-model="SelectedValue" value="{{SelectedValue}}"/>
Here is the updated code.enter link description here
Demo Fiddle