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
Related
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 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>
<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.
I'm having some trouble submitting a form in a Bootstrap modal using AngularJS. The user is currently able to mash the submit button a few times before the modal dismisses and call the submit function each time. This is obviously not desired behaviour.
So I tried adding data-ng-disabled to the button, and disabling it when the submit button is clicked. This works correctly and the user cannot submit more than once. But now the modal does not close, even using data-dismiss="modal" with the button. I've read about AngularUI Bootstrap but if there's a way to fix this without changing my modals that would be great.
A snipper of the submit button in the modal:
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" data-ng-disabled="isDisabled" ng-click="disableButton(); submit()">Submit</button>
<button class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
The disableButton() function:
$scope.disableButton = function(){
$scope.isDisabled = true;
}
You need to use the name of your form and use that for ng-disabled, then use the $invalid Input State validation, see below:
<button type="button" class="btn btn-primary" ng-disabled="myForm.$invalid" ng-click="submit()">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
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;
};