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
Related
I'm having trouble accessing values from an ng-repeat directive inside a nested template. Hope I'm using the right terminology, but here's some code that may make it clearer.
outer-template.html
<div ng-repeat="test in $ctrl.test_list">
<div id="test-{{ $index }}" layout="row">
<inner-thing ng-model="test"></inner-thing>
</div>
</div>
inner-template.html
<div>
<md-input-container>
<label>ID</label>
<input type="text" ng-model="test.id">
</md-input-container>
</div>
This is what I was hoping would work. The reasons it doesn't seem fairly obvious even to me, but I'm wondering if something like this is possible. I'm already aware that I can, from the 2nd (inner) controller, access each test using $scope.parent.test_list, but what I really want is for the 2nd (inner) template to be aware of which test it was "given" from the ng-repeat directive.
Well in case anyone has this same question, the answer is quite simple:
inner-template.html
<div>
<md-input-container>
<label>ID</label>
<input type="text" ng-model="$parent.test.id">
</md-input-container>
</div>
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 am trying a simple code with angular strap's bootstrap tooltip. I am seeing that AngularJs data binding is not working when bs-tooltip is used.
Bind not working
<input type="text" ng-model="name1" data-trigger="focus" data-type="success" data-title="something" bs-tooltip> {{ name1 }}
Bind works
<input type="text" ng-model="name"> {{ name }}
Plunker demo
Am I missing something?
Sounds like angular-strap creates a child scope for the input control, but {{name1}} is located to its parent scope. If you inspect the HTML, you will see ng-scope in class, while the second input control does not.
<input type="text" ng-model="$parent.name1"
data-trigger="focus" data-type="success" data-title="something" bs-tooltip=""
class="ng-valid ng-scope ng-touched ng-dirty ng-valid-parse">
My simple solution is to add a $parent. prefix to the variable. It works as
<input type="text" ng-model="$parent.name1"
data-trigger="focus" data-type="success" data-title="something" bs-tooltip> {{ name1 }}
I have the following problem with angular custom directives. I have a modal dialog that gets filled with input elements. These input elements get filled using ng-repeat angular directive like this
<div ng-repeat="item in params">
<label>{{item.nombre}}{{item.valor}}</label>
<div class="input-group" ng-if="item.tipo=='DATE'">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" name="{{item.nombre}}" class="form-control reportesFechas" ng-model="item.valor"
data-custom-datepicker data-date-format="dd/mm/yy" id="{{item.nombre}}">
</div>
</div>
data-custom-datepicker is my custom attribute. The params model gets filled via a service call to a java backend like this
appbsReportsParamsService.query({
q: "idReport="+id
}, function(data){
$scope.params = data.content;
})
The service call works OK because the final HTML is "correct" in terms of inputs gets generated. However data-custom-datepicker doesn't get applied.
This is the HTML "ng-repeat" portion being generated:
<div class="input-group ng-scope" ng-if="item.tipo=='DATE'">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" name="fecDesde" class="form-control reportesFechas hasDatepicker ng-pristine ng-valid ng-touched" ng-model="item.valor" data-custom-datepicker="" data-date-format="dd/mm/yy" id="fecDesde">
</div>
<div class="input-group ng-scope" ng-if="item.tipo=='DATE'">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" name="fecHasta" class="form-control reportesFechas hasDatepicker ng-pristine ng-valid ng-touched" ng-model="item.valor" data-custom-datepicker="" data-date-format="dd/mm/yy" id="fecHasta">
</div>
So basically I want to know how to apply the directive after a async service call to populate the model.
Try adding $scope.$apply() in your service success call after $scope.params = data.content.
Because your params service query is running outside of the $scope in Angular, doing the $apply, will force update the $scope.
See if that helps.
appbsReportsParamsService.query({
q: "idReport="+id
}, function(data){
$scope.params = data.content;
$scope.$apply();
});
Ok, the problem was I was running the directive code under "compile" phase. I change it to "post" phase, now everything works ok. The problem is the Angular workflow (not the problem, but where my misconception was). This post helped me understand.
Angular directives - when and how to use compile, controller, pre-link and post-link
I have the following markup. The function isn't called when you click on the icon and there are no errors logged to the console.
Online search hasn't shown others with this issue, so either it's a feature of the 'input append' markup or I've got something basic wrong that I'm just not seeing.
I'm using bootstrap 2.3 and angularjs 1.2.13
<div class="input-append input-block-level">
<input type="text" name="myFieldName" ng-model="model[field]"
class="input-block-level ng-pristine ng-valid ng-valid-required"
placeholder="My Field Name" ng-required="false">
<a class="btn add-on" ng-click="aCtrlFunc('my field name')">
<i class="icon-search"></i>
</a>
</div>
The form works, the model is updated as expected when typing into the field and on form submit. Why doesn't this button click work?
update
Mystery solved. It's a scope issue, like this one: https://stackoverflow.com/a/16489532/149060
The form fields are generated by a directive who's templates include ngRepeats. I didn't think of it because I didn't think it was using an isolate scope.