HTML
<input type="text" ng-model="email" ng-disabled="button" rquired>
<a class="btn" ng-model="button">edit</a>
So basically I want to enable the input field when the button is clicked. I could do this with some javascript but I want to figure out an easy way for this.
The above example does not work. Any ideas why?
You can use ng-click to change the value of button:
<input type="text" ng-model="email" ng-disabled="button" required ng-init="button=true">
<a class="btn" ng-click="button=false">enable edit</a>
<a class="btn" ng-click="button=true">disable edit</a>
<a class="btn" ng-click="button=!button">toggle edit</a>
Related
I have an Angular directive that includes a form with a datepicker. I am trying to create a function to keep the button click from calling submit on the form. I can not determine where to find the .opened attribute. When I was performing the open with ng-click everything worked. Below is sample code.
HTML:
<form ng-submit="editAlert.$valid && vm.handleSubmit()" name="editAlert" id="editAlert" class="buffer-bottom" novalidate>
<div class="form-group">
<label class="control-label" for="effectiveDate">Effective Date</label>
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="MM-dd-yyyy" is-open="dpEffectiveDate.opened" ng-model="alertMsg.effectiveDateFmt" name="effectiveDate" id="effectiveDate">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="vm.openDateHandler($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
<p class="help-block" ng-show="editAlert.effectiveDate.$error.endBeforeStart">Effective date must be before expire date.</p>
</div>
</form>
I also tried passing dpEffectiveDate into the openDateHandler function.
Below is my Typescript function
openDateHandler = ($event) => {
$event.preventDefault();
//dpDate.opened = !dpDate.opened;
}
How do I access the .opened attribute?
If all you are trying to do is prevent the submit behaviour, simply add 'type="button"' to your button element.
<button type="button" class="btn btn-default" ng-click="vm.openDateHandler($event)">
By default, a button inside a form will act as a submit button unless it's given a different type.
You shouldnt need to mess with the opened state of a date picker to prevent a form submitting.
I have this little piece of code in my html page
<div class="input-group">
<input type="text" class="form-control" name="telefono" id="field_telefono" ng-model="vm.indirizzo.telefono" telefono required/>
<span class="input-group-addon" role="button" uib-popover="{{'theFoodApp.indirizzo.informativa' | translate}}" data-popover-title="{{'theFoodApp.indirizzo.informativa-title' | translate}}" data-popover-placement="top" data-popover-append-to-body="true">
<span class="glyphicon glyphicon-question-sign white"></span>
</span>
</div>
Is possibile open the uib-popover when I focus on the input text?
popover-trigger="'focus'"
You could also use ng-focus and ng-blur directives to trigger a toggle variable that is passed to popover-is-open="".
NOT DUPLICATED
I have a search with an input, a button and another button to toggle the advanced search:
<form role="form">
<div class="form-group ">
<input type="text" id="search-input" ng-model="searchTerm" autocomplete="off" autofocus ng-keydown="onKeyDownEnter($event)" />
<div class="btn-group " >
<button type="button" ng-click="search()" class="btn btn-default">Submit</button>
<button class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
<div id="subMenu" class="dropdown-menu advanced-search">
<div class="form-group">
<label for="usr">Find documents with...</label>
<input type="text" class="form-control" ng-model="adSearch.q1">
</div>
<div class="form-group">
<label for="usr">And</label>
<input type="text" class="form-control" ng-model="adSearch.q2">
</div>
<div class="form-group">
<label for="usr">Or</label>
<input type="text" class="form-control" ng-model="adSearch.q3">
</div>
<div class="form-group">
<label for="usr">Not</label>
<input type="text" class="form-control" ng-model="adSearch.q4">
</div>
</div>
</div>
</div>
</form>
When i press the enter key, the button of the advanced search is which takes the action.
I would like to know what can i do to the normal search (the fisrt button) takes the action when i press the enter key.
I do not want use jquery or javascript i need to do it with angularjs, i thought i could do it with just css but seems like i can not.
I can use this:
$scope.onKeyDownEnter = function($event){
if ($event.keyCode === 13) {
console.log("yeeeee");
}
};
But this also toggle the "subMenu", I do not know how to disable the behavior of that "subMenu" when i press the enter key.
Extra information:
Here i have the subMenu before press enter key
Here i have the subMenu after press enter key
I do not know why this code was the cause of this problem:
<button class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
If you have this problem, just add type="button" like this:
<button type="button" class="btn dropdown-toggle downArrow" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Desplegar menú</span>
</button>
And all will work fine
As you have used autofocus in your search input box you can use jquery to get focus on your normal search button:
$(document).ready(function(){
$('#search-button').blur(function(){ $('#save-btn').focus(); });
});
Ps: please give ID to your button save-btn to get this working.
Did you try to apply focus ?
Like this :
$('#myButton').focus();
I have a form which is dynamically generating the fields, I am using ng-form for this. The form has an ng-repeat for input fields and the main form has a 'Save' button.
i.e when one of the input fields is dirty and has content, the save button should be enabled and should be disabled otherwise.
Here is my HTML Code :
<form class="form-horizontal" name="$parent.fSForm" novalidate ">
<fieldset class="form-group pl-sm" ng-repeat="fs in list track by $index">
<ng-form name="innerForm">
<div class="col-md-5">
<input type="text" class="form-control" autocomplete="off" name="fsl" ng-change="fileChanged()" ng-model="fs.path" placeholder="Add new here">
</div>
</ng-form>
</fieldset>
<a class="prop-toggle ng-binding" href="" ng-click="addNew()">Add More</a>
</form>
</div>
<div class="footer">
<span>
<button type="button" class="btn" ng-click="close()">Cancel</button>
</span>
<span>
<button type="submit" class="btn btn-primary" ng-click="save()" ng-disabled="fSForm.$error.fooname">Save</button>
</span>
</div>
So for my save button to be disabled when the form loads initially how should I go about validating that with an ng-form present? The save should be enabled when one of the input fields has some text in it. not sure how we can handle ng-disabled with ng-form within a form save button
I'm new to using AngularJS and UI Bootstrap and I'm trying to add dropdowns dynamically using ng-repeat. The problem is that when any one dropdown is clicked it triggers all of them. I'm guessing I'm doing something really stupid with my code and I would appreciate it if someone could point me in the right direction on how to make this code work:
<div class="form-group" data-ng-repeat="item in ctrl.items">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="" name="itemDescription" data-ng-model="item.description">
</div>
<div class="col-sm-5">
<div class="input-group">
<input type="tel" class="form-control" placeholder="" name="value" data-ng-model="item.value">
<div class="input-group-btn" dropdown is-open="ctrl.isOpen">
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li></li>
</ul>
</div>
</div>
</div>
The problem is that with more than one dropdown, a click results in all dropdowns being triggered and its probably something really easy but I'm having a hard time with it.
Appreciate any help
/Regards Kris
The issue is is-open="ctrl.isOpen". You are binding the opening of all of them with ctrl. It should be bound to something distinct for each repeat, i.e. something like is-open="item.isOpen"