<input ng-model="email" type="text" class="marginHalf" ng-hide="email==''" readonly>
When on edit button click, Show this so user ca add an email.
You need to have a flag in your controller to toggle on and off when your edit button is clicked.
$scope.editMode = false;
$scope.onEditButtonClick = function(){
$scope.editMode = true;
}
then you use a condition that checks this variable but I recommend using ng-if instead.
<input ng-model="email" type="text" class="marginHalf" ng-if="editMode" readonly>
Here is the difference between ng-if and ng-show/ng-hide.
Related
Is there any way to shift + click to select multiple checkboxes using this directive like we have in Gmail?
Example:
Click on 1st row's checkbox.
Holding down SHIFT key.
Click on 10th row's checkbox.
Result: the first 10th rows will be selected.
Here is an example of how to do it, the selectors will need to be changed to something more specific when it is used in something with more that just the check-boxes.
It works by scanning all the inputs and seeing if it is checked, if it is it toggles a boolean that will cause each element to toggle to checked until the this matches the clicked item then breaks out of the loop as it doesnt need to check any more.
$("[type='checkbox']").click(function(evt) {
if (evt.shiftKey){
let item = $(this);
let hitfirstChecked = false;
$("#wrapper-check input").each(function(){
if($(this).is(":checked")){
hitfirstChecked = true;
}
if(hitfirstChecked){
$(this).prop('checked', true);
}
if(item.is($(this))){
return false;
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="wrapper-check">
<input type="checkbox" value="1">1
<input type="checkbox" value="2">2
<input type="checkbox" value="3">3
<input type="checkbox" value="4">4
<input type="checkbox" value="5">5
<input type="checkbox" value="6">6
<input type="checkbox" value="7">7
<input type="checkbox" value="8">8
</span>
I need to disable the submit button after clicking on the button to prevent multiple submissions but before the it has to ensure that the required fields are filled.
I tried
<body ng-app="ngToggle">
<div ng-controller="AppCtrl">
<form name="newUserForm">
<input type="text" required>
<input type="text" required>
<input type="text">
<button ng-click="disableClick()" ng-disabled="isDisabled"
ng-model="isDisabled">Disable ng-click</button>
</form>
</div>
</body>
angular.module('ngToggle', [])
.controller('AppCtrl',['$scope', function($scope){
$scope.isDisabled = false;
$scope.disableClick = function() {
alert("Clicked!");
$scope.isDisabled = true;
return false;
}
}]);
but this will only disable the button without any validation
Ok, I get what you mean/want so I'll try to help and come up with some code - which is obviously missing but if it wasn't missing the necessary code, you'd have the solution :)
First, you'll have to properly write your form:
<form name="newUserForm" ng-submit="disableClick(newUserForm.$valid)" novalidate>
<input type="text" name="input1" ng-model="form.input1" required>
<input type="text" name="input2" ng-model="form.input2" required>
<input type="text" name="input3" ng-model="form.input3"> //not required
<button type="submit" ng-disabled="isDisabled">Disable ng-click</button>
</form>
so what we've got here, which you're missing:
You did name your form, but you're missing a submit, in the form as ng-submit or the button with type="submit", which will submit the form and that's when the validation happens
In order for Angular to validate your inputs, they need to have ng-model, otherwise it will not validate (HTML5 validation would, but read on)
I've added novalidate so we tell the browser "Hey, we need this validated but not by you, so do nothing", and Angular takes over
And last but not least, Angular adds a couple of properties to the form (see more here: Angular form Docs), $valid being one of them, which is set to true when all validated inputs are valid.
So this sums up the changes you needed to do to your form.
As for the Javascript part, there is just one small change:
$scope.disableClick = function(valid) {
if(valid && !$scope.isDisabled) {
$scope.isDisabled = true;
}
return false;
}
I guess the change is obvious, but I'll explain anyway - check that newUserForm.$valid (boolean) and if it's true (meaning form has passed validation) disable this button.
Of course, you'll have to add checks not to run the code on any type of submits and not just disabling the button (which can easily be re-enabled via Dev Tools), so that's why I added !$scope.isDisabled to the if statement.
Hope this answers your question :)
P.S. Here's a running demo in Plunker
Hi I have a form with some inputs like email, title, color...
I have 2 buttons "Save" and "Undo changes".
I need that this buttons will be always disabled accept, if something was changed.
For example I started to change email and then I considered. While I'm typing new email buttons should be enabled, but after click on one of them they should be disabled again.
<form name="form" ng-submit="change()" novalidate>
<input type="text" ng-model="title"/>
<input type="email" name="email" ng-model="email" placeholder="{{email}}" />
<input type="color" ng-model="color"/>
<button type="submit" ng-disabled="!form.$dirty">SAVE</button>
<a ng-click="cancel()" ng-disabled="!form.$dirty">UNDO CHANGES</a>
</form>
How can I make them disable again after click on one of buttons?
Call $scope.form.$setPristine() to cancel all the dirty flags:
function TodoCtrl($scope) {
$scope.change = function() {
$scope.form.$setPristine();
}
$scope.cancel = function() {
$scope.form.$setPristine();
}
}
Example: http://jsfiddle.net/ej5et0f5/1/
Simply create a flag variable that you'll set to true after submitting and to false after changing inputs, then just do:
<button type="submit" ng-disabled="flagVariable">
I use a button to hide/show (toggle) a div:
HTML
<button type="button" ng-click="toggleBuilder()" class="btn btn-primary">Hide Div queryBuilder</span></button>
<input type="text" class="form-control" id="searchField" ng-model="output"/>
<div class="queryBuilder" ng-hide="builder"></div>
JS
$scope.builder = true;
$scope.toggleBuilder = function() {
$scope.builder = $scope.builder === false ? true : false;
};
Now I would like to achieve that if the DIV is hidden, the input has no binding with the "output". If the DIV is shown, the input should have the binding with "output".
Thank you for your tips
Based on your comments, it sounds like you want to disable the input field when the div is visible. You can accomplish this by adding an ng-disabled on the input element, and binding the input to a separate variable from output, and assigning output to the bound variable when the toggle function is called, like so:
<button type="button" ng-click="toggleBuilder()" class="btn btn-primary">Hide Div queryBuilder</span></button>
<input type="text" class="form-control" id="searchField" ng-model="searchTerm" ng-disabled="!builder"/>
<div class="queryBuilder" ng-hide="builder"></div>
And
$scope.builder = true;
$scope.toggleBuilder = function() {
$scope.builder = $scope.builder === false ? true : false;
// set the bound variable if the builder is hidden
$scope.searchTerm = $scope.builder ? $scope.searchTerm : $scope.output;
};
<button type="button" ng-click="toggleBuilder()" class="btn btn-primary">Hide Div queryBuilder</span></button>
<input type="text" class="form-control" id="searchField" ng-model="output"/>
<div class="queryBuilder" ng-hide="builder">{{output}}</div>
This should work, even when the div is hidden, typing into the textfield will still update the scope property output. the ng-model directive will implicitly create a scope property called output when it doesn't find one on the scope.
It's important to note that the value is being stored/updated in the controller, not in your view, you could have a million {{output}} bindings, they would all show the same value as you type into your textfield, so even if your div is hidden, it just hides the output, but that doesn't prevent it from being updated, as this happens in the controller.
The {{output}} (or ng-bind="output") will just show the value of the output scope property.
How do I identify the change in value of a "radio button" before the current value change?
In my application, I need to alert the User about the effects that changing the value of this radio button will cause in the rest of form.
I've tried using ngChange and ngClick, but the value of the radio button is always changed (to the new value) even before I can do something with the current value.
Example:
<form>
<label>Nivel de gestão</label>
<input name="gestao" type="radio" data-ng-model="nivelGestao" value="T" data-ng-change="mudarNivelGestao()">Tecnica
<input name="gestao" type="radio" data-ng-model="nivelGestao" value="O" data-ng-change="mudarNivelGestao()">Operacional
<input name="gestao" type="radio" data-ng-model="nivelGestao" value="I" data-ng-change="mudarNivelGestao()">Institucional
<table>
<tr>
<td>Id</td>
<td>Nome</td>
</tr>
<tr data-ng-repeat="gestor in gestores">
<td>{{gestor.id}}</td>
<td>{{gestor.nome}}</td>
</tr>
</table>
<script>
...
$scope.mudarNivelGestao = function() {
alert($scope.nivelGestao); // In this place the content has already been changed, but before I need to alert and ask if the User want continue, if "No" return to the last value, if "Yes" change the value and go ahead...
...
}
...
</script>
</form>
I answered a similar question here
Just surround the radio input with label and apply the confirm logic in labels ng-click event.
<label ng-click="confirmChange($event)"><input type="radio" ng-model="value" value="foo" ></label>
$scope.confirmChange = function(event) {
if(!confirm('sure?')) {
event.preventDefault();
}
};
You can use the mousedown event (which will fire before the click and change events).
E.g.:
<input type="checkbox" ng-model="option"
ng-mousedown="confirmOption($event)" />
$scope.confirmOption = function (evt) {
var confirmMsg = 'Are you sure you want to select this ?';
if (!$scope.option) {
var confirmed = confirm(confirmMsg);
$scope.option = confirmed;
}
};
See, also, this short demo.