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
Related
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);
}
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>
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
I have created a service, written a code grabbing the names of the users in the AngularJS controller and am calling it in the view but i dont see anything :/ am i doing something incorrectly? new to angularJS btw.
this is the revised angular controller
Official way of generating options in AngularJS:
<select ng-model="mySelection" ng-options="user.value as user.userName for user in allUsers">
<option value=""></option>
</select>
Also, you are setting ng-model to be the same as the thing being looped, hence you're seeing nothing.
ng-model will be the variable which will save your selection from allUsers.
You need to use ng-options directive to generate <option> elements. ng-model directive is used to specify model property to store selected option.
Example from official documentation:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
You can read more here: https://docs.angularjs.org/api/ng/directive/ngOptions
I have problem with angular material.
I want to use Angular Material md-select directive with dynamic text in label. It seams that their directive creates copy of the html label text and put in in its span so after scope value is updated it is updating value in hidden label but not in their span (it is updating in after you open and close select list). Is it a bug or I am doing something wrong? If it is a bug does anybody see a nice way to fix it?
Thanks in advance!
JS:
angular.module('myApp', ['ngMaterial'])
.controller('MyController', function ($scope, $timeout) {
$timeout(function(){
$scope['select_n_letter'] = 'Lorem ipsum';
}, 500);
})
;
;
HTML:
<body ng-app="myApp">
<div ng-controller="MyController" style="padding-top: 50px">
<form name="a_form">
<md-input-container>
<label>{{select_n_letter}}</label>
<md-select
required
name="letter"
ng-model="letter"
>
<md-option value="option">selected</md-option>
</md-select>
</md-input-container>
</form>
</div>
Plunker
EDIT
To see which span I mean please check the Plumker preview and see compiled directive HTML which looks like below:
<md-select required="" name="letter" ng-model="letter" class="ng-pristine md-default-theme ng-invalid ng-invalid-required ng-touched" tabindex="0" aria-disabled="false" role="combobox" aria-expanded="false" id="select_3" aria-required="true" aria-invalid="true">
<md-select-value class="md-select-value md-select-placeholder" id="select_value_label_0">
<span>/* text should goes here */</span>
<span class="md-select-icon" aria-hidden="true"></span>
</md-select-value>
</md-select>
One possible solution is to show two identical md-select's ( apart from their label ). And use ng-show to switch between them.
Another possibility, use a directive containing md-select inside.
Switch it on and off with ng-if with a different label as an input.
Hope this helps