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
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);
}
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
After migrating to angular 4 a strange issue with my template-driven form has occured. My required attr on input seems to be broken. I suppose that has novalidate attribute by default. But I need some html5 validations. Tried novalidate="false" but had no success.
Is there some way to enable validation? Now it seems using reactive forms with its Validators.required is the only way.
Thanks!
My HTML component code snippet:
<form (submit)="savePhone(phone);" novalidate="false">
<h3>Новый телефон</h3>
<md-input-container>
<input mdInput placeholder="Номер телефона"
onlyNumber="true" name="number"
[(ngModel)]="phone.number" required>
</md-input-container>
<md-select placeholder="Источник получения" (ngModel)="phone.source" name="source">
<md-option *ngFor="let source of sources" [value]="source">
{{ source }}
</md-option>
</md-select>
<textarea name="comment" placeholder="Текст комментария"
[(ngModel)]="phone.comment" name="comment">
</textarea>
<div layout="row" layout-align="end">
<button class="button button--success" type="submit">
Добавить
</button>
</div>
To enable HTML5 validation use
<form (submit)="savePhone(phone);" ngNativeValidate>
See also NgNoValidate source at GitHub
I'm using AngularJS and Angular Material in my web application.
I'm a total newbie to this AngularJS and Angular Material thing.
Now I have to show a green tick mark in front of input field only upon entering valid input data in it.
How should I achieve this?
Sample password field code is as below:
<md-input-container class="md-block" flex>
<label>Current Password</label>
<md-icon md-svg-src="/images/icons/ic_lock_black_24px.svg"></md-icon>
<input type="password" ng-model="changePassword.currentPassword" required name="curPass" minlength="6">
<div ng-messages="chnagePasswordForm.curPass.$error">
<div ng-message="required">Please enter valid password</div>
<div ng-message="minlength">Password should be of eight or more characters</div>
</div>
<md-button ng-disabled="chnagePasswordForm.$invalid" class="md-raised md-primary enrolBtn" ng-click="changePassword()">Save</md-button>
</md-input-container>
I have to display green colored tick mark in front of this password field only upon entering the valid password.
Thanks.
What have you tried so far? Did you try just adding another icon and conditionally showing it with ng-if:
<md-icon md-svg-src="/images/icons/ic_lock_black_24px.svg"></md-icon>
<md-icon md-svg-src="/images/icons/my_checkmark.svg" ng-if="!changePassword.curPass.$error"></md-icon>
<input type="password" ng-model="changePassword.currentPassword" required name="curPass" minlength="6">
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