<input type="button" value="
{{ flag ? "Active" : "De-active" }}
" class="btn btn-danger btn-sm" ng-click="someFunction()"/>
I want above expression to be executed to select the value of value attribute. How can I do that in angularJs? Is there any directive for that?
flag is a boolean value here. Please suggest the solution.
You are looking for the following
<input type="button" ng-value="flag ? 'Active' : 'De-active'" class="btn btn-danger btn-sm" ng-click="someFunction()"/>
And set the flag as $scope.flag = true in your controller.
Working jsFiddle for demonstrating.
Related
I Have a situation based on the sum of a group textboxes the button should be enabled and disabled in angularjs
<button type="button" class="btn btn-primary" ng-disabled="{{goalAA-goalAB--goalAC--goalAD--goaAE}} > 100" ng-click=clicked()>Save changes</button>
if the value is more than 100 the disabled is not set to true
the fiddler goes here JSFIDDLE
Remove square brackets in ng-disabled. You can find more information about ng-disabled directive in angularjs documentation.
<button type="button" class="btn btn-primary" ng-disabled="goalAA-goalAB--goalAC--goalAD--goaAE > 100" ng-click="clicked()">Save changes</button>
Demo
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>
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
Hi I have the following html:
<div class="col-sm-20">
<div class="btn-group btn-group-justified">
<label class="btn btn-primary demo-review" ng-model="demo.title" btn-radio="'{{::demo.demoinfo.title}}'">
{{::demo.demoinfo.title}}
<i class="check-circle btn-success" aria-hidden="false" ng-if="'0' == '0'"></i>
</label>
<label class="btn btn-primary demo-review " ng-model="demo.title" btn-radio="'{{::demo.demoform.title}}'">
{{::demo.demoform.title}}
<i class="check-circle btn-success" aria-hidden="false" ng-if="'1' == '0'"></i>
</label>
</div>
</div>
Now in the above,the labels are added with a class called "active" whenever a particular label is selected; i.e., this class 'active' is dynamically added.
And I want to show/hide the <i class="check-circle btn-success" aria-hidden="false" ng-if=" '1' == '0' "> based on whether the label has class 'select' or not. So basicallly I want to update my ng-if based on the existence of the class 'active'.
I think I am pretty close:
<label class="btn btn-primary demo-review" ng-model="demo.title" btn-radio="'{{::demo.demoinfo.title}}'">{{::demo.demoinfo.title}}<i class="amds-check-circle pull-right-sm " aria-hidden="false" ng-if=" angular.element($this).hasClass('active') "></i></label>
Basically in the ng-if I am trying to check if the label element has class 'active'.I might be little away, may be syntax is wrong.Can anyone pls help?
Is it possible?
Any help will be highly appreciated.
Thanks in advance.
I think what you actually want to do is conditionally apply a class to your element(s).
Using ng-class, you can do this:
<label ng-class="{ 'selected': demo.isSelected }">
<i ng-class="{ 'check-circle': demo.isSelected }" class="btn-success" aria-hidden="false"></i>
</label>
In this case, only if your model demo.isSelected is true, the selected class will be applied to the label and also the check-circle class applied to the <i> element.
There seems to be a problem converting ui.bootstrap.buttons to be used with ng-repeat. The ui.bootstrap.buttons example and documentation is here: http://angular-ui.github.io/bootstrap/
Bascially the default example works nicely: http://plnkr.co/edit/2O81y57GtfP6EPNH9qYa?p=preview
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
But when it's converted the use ng-repeat, it breaks: http://plnkr.co/edit/nzx1VTGN4Q59JlFCU53V?p=preview
<div class="btn-group">
<label ng-repeat="test in ['Left', 'Middle', 'Right']" class="btn btn-primary" ng-model="radioModel" btn-radio="'{{test}}'">{{test}}</label>
</div>
Try
<label ng-repeat="test in ['Left', 'Middle', 'Right']" btn-radio="test" class="btn btn-primary" ng-model="radio.model">
instead of
btn-radio="'{{test}}'"
On top of this ng-repeat is creating a new scope so you need to account for this as well. Here is a working plunk: http://plnkr.co/edit/h5e5OgFCqv28MPy4tEaM?p=preview
In the end after some testing I got it working using ng-class for initial selected value and own ng-click handler that changes the selected button
HTML-code for the buttons:
<div class="btn-group">
<button ng-repeat="(timelineIndex, timeline) in timelines" ng-click="selectTimeline(timeline)" ng-class="{active: timeline.name === selectedTimeline.name}" class="btn btn-primary">
{{timeline.name}}
</button>
</div>
in controller:
$scope.selectTimeline = function(activeTimeline) {
$scope.selectedTimeline = activeTimeline;
};