Access selected object property in Angular.js - javascript

I'm new to angular and I'm working with angular.js and angular-material together.
What I'm trying to do is create a md-select and assign an object to it as a ng-model. My md-options come from an array of objects, and when I select the desired option, the whole object is stored in the ng-model.
The problem is that when after that I try to select a property of this object, nothing is returned. You can see my code here:
<md-input-container md-no-float class="md-block col-1111-20-0-fl mrg-l-20">
<md-select ng-model="orderItems[$index].item">
<md-option ng-repeat="item in itemNames[$index] | orderBy: item.name" value="{{item}}">
{{item.name}} - {{item.price | currency : 'R$' : 2}}
</md-option>
</md-select>
</md-input-container>
{{orderItems[$index].item.name}}
if I write just {{orderItems[$index].item}}, the whole object is accessed, showing it as an object and it's propeties, like this:
{"_id":"5812cfdb1c27a7187c61b8c1","price":"2","name":"Water Bottle 500ml"}
but when I write:
{{orderItems[$index].item.name}}
I can't access the name of the object, nothing shows.
What am I doing wrong here??
Thanks!

The $index you're using in the ng-repeat won't apply to the parent md-select so you cannot index your orderItems array using that number. Also, according to the angular-material docs, you don't need to evaluate value="{{item}}" for the value attribute.
If you just want to store the value selected as an object, you can just do this:
<md-input-container md-no-float class="md-block col-1111-20-0-fl mrg-l-20">
<md-select ng-model="selectedItem">
<md-option ng-repeat="item in itemNames | orderBy: item.name" ng-value="item">
{{item.name}} - {{item.price | currency : 'R$' : 2}}
</md-option>
</md-select>
</md-input-container>

Related

how to call a function from a dropdown menu in angular4

** I ve two functions in my component.ts.
1) getfixedbyId(val)
2) getFloatById(val).
but I'm not able to call them through this method. Dont want to use controllers.**
<select class="form-control" formControlName="propertyId">
<option value="">--Select Property -- </option>
<ng-container *ngIf="subForm.controls.subscriptiondetails.controls.selecttype.value==='Somethging1'" ng-click="getFloatByID(property.someId)">
<option *ngFor="let property of floatList" [(value)]="property.floatingId" >{{property.name}}</option>
</ng-container>
<ng-container *ngIf="subForm.controls.subscriptiondetails.controls.selecttype.value==='Something2'" ng-click="getFixedByID(property.someId)">
<option *ngFor="let property of fixedList" [(value)]="property.fixedId" >{{property.name}}</option>
</ng-container>
</select>
You are using the old AngularJS syntax for the click action. You should use the new Angular syntax like this:
<ng-container *ngIf="subForm.controls.subscriptiondetails.controls.selecttype.value==='Somethging1'" (click)="getFloatByID(property.someId)">
If you need more information about it you can read all about the click syntax in the docs.
Just replace your way of calling a method in Angular like this -
ng-click
with
(click)

AngularJS - Find object in ng-repeat after updating a field

I am working on an online dashboard. This dashboard has a page which consists of all the tasks related to a certain project. Each task has fields such as the amount of hours that were booked to the task, and the progress (0 until 100%).
It is possible to change the progress field as it consists of a dropdown menu with all the possible percentages. I used to change the progress, select each row that I altered and clicked on an 'update tasks' button in order to send them to my Controller and update them. This was fine until a colleague of mine came up with the idea of automatically updating the task once the value of the progress field was changed. I can place an ng-click on each value which activates as soon as I change the value.
My question however, how can I let my controller know what row I am working in at that moment. Let's say I have 3 different tasks and change the progress of task 2. My controller should know it has to send the ID of task 2 to the server to update its content.
As soon as the value of task 2 changes to, for example 30%, the updateTaskById() method executes. This method should update the task in the database with the new value. How do I let my controller know what task it has to update.
HTML
<td md-cell class="tdWidth">
<md-select ng-model="task.custom_fields['96203']" placeholder="100%">
<md-option value="0" ng-click="updateTaskById()">0%</md-option>
<md-option value="0.1" ng-click="updateTaskById()">10%</md-option>
<md-option value="0.2" ng-click="updateTaskById()">20%</md-option>
<md-option value="0.3" ng-click="updateTaskById()">30%</md-option>
<md-option value="0.4" ng-click="updateTaskById()">40%</md-option>
<md-option value="0.5" ng-click="updateTaskById()">50%</md-option>
<md-option value="0.6" ng-click="updateTaskById()">60%</md-option>
<md-option value="0.7" ng-click="updateTaskById()">70%</md-option>
<md-option value="0.8" ng-click="updateTaskById()">80%</md-option>
<md-option value="0.9" ng-click="updateTaskById()">90%</md-option>
<md-option value="1" ng-click="updateTaskById()">100%</md-option>
</md-select>
</td>
Angular Controller:
$scope.updateTaskById = function() {
// Update functionality here
};
Thanks in advance, I hope my question is clear enough.
EDIT: As seen in Alexandru's answer, it is possible to send values of the task I was altering from my ng-click. For example: updateTaskById(task.task_id).
You can pass the value to ng-click method. For instance,
<md-option value="0" ng-click="updateTaskById(0)">0%</md-option>
JS
$scope.updateTaskById(value){
console.log(value);
}

Cannot change md-select value programmatically

Im trying to change the item of md-select programmatically and tried using ng-model-options="{trackBy: '$value.id'}" but this code won't work. Did i missed something so simple?
You can take a look at this DEMO
The md-select element does not have an attribute for ng-model-options since it's not stated in the docs.
Anyways, it looks like you have to instead of track by data, use track by $index.
<md-select ng-model="selectedAnimal">
<md-option
ng-value="item"
ng-repeat="item in data track by $index">
{{item.animal}}
</md-option>
</md-select>
Updated Codepen

Angular material select get reset

I'm facing another problem with Angular Material.
Now I have a form, with two select. The problem is when I select one value in any of this two select, the other one get reseted and loose his value.
is this a bug? or maybe I'm doing something wrong?
<form name="addTarjeta">
<div ng-controller="MedioPagoController">
<md-input-container class="md-icon md-block">
<label>Tipo de tarjeta</label>
<md-icon class="material-icons"></md-icon>
<md-select ng-model="_tarjeta.medioPago" md-on-open="listaMedioPago()"
required name="medio">
<md-option value="{{medio}}"
ng-repeat="medio in medioPagos track by medio.idMedioPago">{{medio.nombrePago}}</md-option>
</md-select>
</md-input-container>
</div>
<div ng-controller="EntidadBancariaController">
<md-input-container class="md-icon md-block">
<label>Entidad bancaria</label>
<md-icon class="material-icons"></md-icon>
<md-select ng-model="_tarjeta.medioPago" md-on-open="listaEntidadBancaria()"
required name="entidad">
<md-option value="{{entidad}}"
ng-repeat="entidad in entidadBancarias">{{entidad.nombreEntidad}}</md-option>
</md-select>
</md-input-container>
</div>
</form>
As I post in a comment:
You are binding both selects to the same ng-model="_tarjeta.medioPago", so this is the expected behaviour.
I think it's probably just a typo in your code. Could you check it?
Change the ng-model of (probably) your second select to another variable of the controller and the problem should disapear.
Hope it helps

How can preselect value in angular ui select editing

I am using angular schema form anf use ui select to populate options.
Now i am binding my object with id of the choices. Here is the template
<ui-select
ng-model="$select.selected"
theme="bootstrap"
ng-disabled="disabled"
on-select="$$value$$=$select.selected.id"
>
<ui-select-match placeholder="Please Select ">{{$select.selected.display}}</ui-select-match>
<ui-select-choices repeat="a in choices">
<div ng-bind-html="a.display"> {{ a.display }}</div>
</ui-select-choices>
</ui-select>
I wasn't ben able to bind my $$value$$ to id of the selected object.
so for hack i added this
on-select="$$value$$=$select.selected.id"
$$value$$ represents the model.myobject so on select i am manually binding id to that property.
For new object this works fine.
But when i need to edit object then that option is not preselected.
Any ideas how can i do that
There is a addon for ui select for schema form and i got idea from it.
But i could not fully understood it
https://github.com/chengz/schema-form-uiselect/blob/master/src/single.html

Categories

Resources