I have two buttons in angularjs to activate and deactivate user my problem is I want to make one button when I click the button change her color and text I try to change but no success.
Someone correct me my Attempt
This is my two button :
<input type="button" class="btn btn-success" value="Active" ng-click="Active(User)" />
<input type="button" class="btn btn-danger" value="Desactive" ng-click="Desactive(User)" />
I try to change them but I don't know what the problem :
<div ng-class="User.IsActive? 'btn btn-success' : 'btn btn-danger' "
ng-click="User.IsActive?Active(User):Desactive(User)">
{{ User.IsActive ? 'Active' : 'Desactive'}}
</div>
Related
I am trying to create a form with two buttons Edit & Submit. Submit is initially disabled . What I need to achieve is when Edit is clicked Submit button should be enabled and edit is disabled. Here is my code so far:
<div class="row">
<button id="editBtn" type="button" data-dismiss="modal" (click)="submitEditedFormData()" class="btn modal-btn btn-default">Edit</button>
<button id="submitBtn" [disabled]="!isValid" type="button" data-dismiss="modal" class="btn modal-btn btn-default">Submit</button>
</div>
You can toggle the value of isValid when you click on edit button and you can do the same when you click on submit by adding a (click) event.
<div class="row">
<button id="editBtn" type="button" data-dismiss="modal" (click)="submitEditedFormData();isValid=!isValid" class="btn modal-btn btn-default" [disabled]="isValid">Edit</button>
<button id="submitBtn" [disabled]="!isValid" type="button" data-dismiss="modal" class="btn modal-btn btn-default">Submit</button>
</div>
I am trying to identify a button which looks like
<span class="btn btn-default fileinput-button" title="Add files…">
<i class="icon-plus"></i>
<span>Add files…</span>
<input id="fileUploadComponent" type="file" name="files[]" multiple="">
</span>
I am trying to identify this button with
//input[#type='file']" selector="Xpath"
input[id='fileUploadComponent'][#type='file'] Selector Css
input[id='fileUploadComponent'] Selector Css
I don't get any exception, instead in my log it shows the element is clicked but nothing happens in the page (button is not clicked)
I have a form. Post submit, if the form is invalid, the error props out below the input fields.
One can hide the form using Cancel button.
The form can be displayed again using 'Show Form' button.
But the issue: The old form error still persists.
How can one reset the form without setting the ng-model associated with it as the input fields should be empty during load?
The reset, I should be able to do it from html itself and not from the controller.
Code below:
<form novalidate name="form.customForm">
<div class="form-group">
<div>
<label>Name</label>
</div>
<div>
<input type="text" name="name" ng-model="model.name" class="form-control" ng-required="true" />
<span class="red" ng-show="(form.customForm.name.$touched && form.customForm.name.$error.required) || (form.customForm.name.$error.required && form.customForm.$submitted)">Name cannot be empty</span>
</div>
</div>
<div class="form-group">
<div>
<label>Age</label>
</div>
<div>
<input type="text" name="age" ng-model="model.age" class="form-control" ng-required="true" />
<span class="red" ng-show="(form.customForm.age.$touched && form.customForm.age.$error.required) || (form.customForm.age.$error.required && form.customForm.$submitted)">Age cannot be empty</span>
</div>
</div>
<button class="btn btn-primary" type="submit" ng-click="submit(form.customForm.$valid);">
Submit
</button>
<button class="btn btn-default" type="button" ng-click="isForm = false;">
Cancel
</button>
</form>
Refer the demo.
I would suggest you write the cancel button logic in the controller, are you sure you want to do it from the html itself?, you can use these statements to reset the form and fields.
form.customForm.$setPristine();
model = {};
form.customForm.$setUntouched();
The updated jsfiddle
On click on Cancel button, you could set
form.customForm.$submitted = false;
This will hide the error messages.
Your cancel button becomes:
<button class="btn btn-default" type="button"
ng-click="isForm = false; form.customForm.$submitted = false;">
Cancel
</button>
See jsfiddle
give the form a name:
<div ng-controller="BlaController as vm">
<form name="vm.formOne">
</form>
</div>
And in the controller do this: (thats how I made it work)
if (vm.formOne) {
vm.formOne.$setPristine();
vm.formOne.$setUntouched();
vm.formOne.$commitViewValue();
}
what about just change the cancel button type to "reset" ?? It's the easiest solution
<button class="btn btn-default" type="reset" ng-click="isForm = false;">
Cancel
</button>
$scope.cancel = function(form){
$scope.isForm = true;
form.customForm.$submitted=false;
form.customForm.name.$touched = false;
form.customForm.age.$touched=false;
}
<button class="btn btn-default" type="button" ng-click="cancel(form)" ng-show="!isForm">
Fiddle Demo
Or
<button class="btn btn-default" type="button" ng-click="isForm = true;
form.customForm.$submitted=false;
form.customForm.name.$touched = false;
form.customForm.age.$touched=false;" ng-show="!isForm">
Fiddle Demo
I have a problem with dont save button in my app.
The scenario is:
I hit edit button on a facility, delete the name and dont want to save the changes. However if I delete the name and click "dont save", it stores an empty new name. How to avoid this?
here is the code if edit.ctp
<input id="subcategory" name="name" size="36" type="text" value="<?php echo $f['Whatever']['name'];?>" />
<div id="name_error" style="color: red;"></div>
<button class="btn btn-lg btn-primary" type="submit" name="submit" onclick="return whatevername();">
<span class="glyphicon glyphicon-ok"></span> Save
</button>
Saving a new name works well, validation function works also okay. Now the cancel button:
<a href="<?php echo h($this->Html->Url(array('controller'=>'whatever','action'=>'view'))); ?>">
<button class="btn btn-lg btn-warning" >
<span class="glyphicon glyphicon-trash"></span> Cancel the changes
</button>
</a>
Any sugestions will be greatly appreciated. Thanks
Instead of the button, use stylized link that will take you back to the reference page.
Consider a form with three buttons:
<form ng-submit="updateUser()">
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary" ng-click="updateUser()">Save</button>
<button class="btn" ng-click="cancelEdit()">Cancel</button>
<button class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
</div>
</form>
When I click cancel, cancelEdit() is being called, then updateUser() is being called. I don't want the updateUser() method to be called. Is there a way to suppress this form submission (preferebly wtihout jQuery?)
Note: I'd still like to be able to hit enter and default to the Save action.
There is a type attribute for the <button> which defaults to submit - see this spec. Thus every button in your form is a submit button. You need to specify the button type for buttons which should not trigger the form submission, like this:
<form ng-submit="updateUser()">
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary">Save</button>
<button type="button" class="btn" ng-click="cancelEdit()">Cancel</button>
<button type="button" class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
</div>
</form>
And also no need to put the submit action to both ng-click and ng-submit - it will trigger double submit. I would advise to use ng-submit because it catches all ways of form submission, like pressing ENTER and not only clicking on submit button.
Try this
<form ng-submit="updateUser()">
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary">Save</button>
<a class="btn" ng-click="cancelEdit()">Cancel</a>
<a class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</a>
</div>
</form>
or this
<form>
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary" ng-click="updateUser()">Save</button>
<button class="btn" ng-click="cancelEdit()">Cancel</button>
<button class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
</div>
</form>
ultimately I don't think you need updateUser() twice in the html
You can use for cancel button type="reset":
<button type="reset" class="btn" ng-click="cancelEdit()">Cancel</button>
The button is a reset button (resets the form-data to its initial values)
http://www.w3schools.com/tags/att_button_type.asp
I was having same problem.I used anchor instead of button.
<form ng-submit="updateUser()">
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary" ng-click="updateUser()">Save</button>
<a class="btn btn-danger" ng-click="cancelEdit()" role="button">Cancel</a>
<button class="btn btn-primary" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
</div>
</form>