So I found out that if I use <textarea placeholder="Write something.."></textarea> inside ng-repeat, the placeholder of the textarea only shows on focus.
If I remove the ng-repeat of my parent element then my placeholder appears on page load.
Same result if I use something like <textarea name="{{repeat.id}}">
text inputs are working fine.
I'm using angularJS 1.3.0-beta.17 and ui-bootstrap-tpls-0.11.0
Any information on that?
Update:
I found out that if I set a ng-model, then the placeholder shows correctly.
Related
My ng-repeat input fields are dynamic fields, if checkbox checked the ng-repeat input fields are displaying, ADD More button also enabled. If i click the ADD More button same set of input fields are displaying, i need to validate my ng-repeat input fields at the time of checkbox status will be true (checked) using ng-required / required option.
Kindly give me a solution using ng-required = "true" / required.
Thank you.
most probably you need to set the name on each checkbox
something like
<div your ng-repeat>
<input type="checkbox" name="chk{{$index}}" ng-model="yourmodel" ng-required="true" />
</div>
I'm using Angular UI Bootstrap datepicker popup with the option datepicker-append-to-body="true". Thus the popup is rendered to the <body>.
In my particular scenario I need to remove the DOM element containing the datepicker. Once the element is removed (with element.remove()) the popup stays in the body.
How should I remove the datepicker, so that popup will be also properly removed?
Here is the plunker demonstrating the issue:
http://plnkr.co/edit/zFew72PpY0E2ETwMKRpv?p=preview
I know that removing an element like this in Angular is not the right way, but I'm working on integration of existing jQuery widget with Angular, and this is done in the existing code. I'm trying to find a way to fix this.
Any help is appreciated.
Edit
Sorry, I believe some additional info is needed to clarify the case:
As I mentioned, I integrate a jQuery plugin with Angular. This is grid.
Grid can have editing row. Grid user can put a Angular UI Datepicker in the editing row to edit date field. Once a user clicks Save (or Cancel), the editing row is removed with $element.remove(). So this happens in the external lib code. What I can do, is to patch removing code and call some cleaning up code. The question is what this cleaning up code could be, so it will clean up the datepicker.
ng-if, unfortunately, is not an option, because patching code knows nothing about the content of the cell and fields of the scope. This code is generic, while datepicker is put in the cell by grid user. In fact it could be any other widget.
You could use ng-if to remove or add back to your html. here is a plunker:
$scope.showDatePanel = true;
$scope.removePanel = function() {
$scope.showDatePanel = false;
}
in your html:
<div id="panelToBeRemoved" ng-if="showDatePanel" class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" datepicker-append-to-body="true" is-open="popup.opened" />
</p>
</div>
</div>
hope it helps.
uib-datepicker use ng-if. it's mean if you assign true in is-open attribute is dynamically append into your body and if assign false then it's automatically destroy in your body tag. So when you press remove element button than assign is-open false. change in your example.js file ->
$scope.open = function() {
if($window.document.getElementById("panelToBeRemoved") != null){
$scope.popup.opened = true;
}
};
I want to use some Custom directive in editable-text
<span ui-Blur="testfn(price);" editable-text="entry.product_id"
e-name="product_id" e-style="width: 200px" e-form="sentryform"
e-required>
</span>
I want to trigger some event on blur on the above text box I have written the directive for that which is working with normal text boxes but not with above shown "editable-text".
x-editable has nice feature were all directives prefixed with an "e-" get appended to the actual edit control (with the "e-" striped of course). For example to add style in the input box you add:
e-style="color:red"
So adding:
e-ui-Blur="testfn(price)" on the span element you talk about, would result in that being added to the input dom element generated when entering edit mode.
I am new to AngularJs and javascript. I have a text box in the dynamically generated angular js tabs. I dont want the value to refresh every time I click on the other tabs. Is static tabs the only option or is there a work around? Just an example fiddle.
Js Fiddle
for your input use a different ng-model for your 3 templates.
<input type="text" ng-model="myModel1">
so you will be able to change tabs and keeping input.
Can someone tell me why the data in the scope is not getting passed to the controller.
Click on the Open Me . Add some text inside the modal window .Click Ok.
why empty items are getting added?
see this Plunker
Use following binding instead:
<textarea class="form-control" rows="3" ng-model="$parent.currentcommitment"></textarea>