Is there a simple declarative way (without a additional function in the $scope) to marked clicked element with AngularJS?
e.g. I have a button which I want to marked as clicked/checked.
<button ng-model="form.btn" ng-click=" // do stuff here to add a class or attr ">Go</button>
I was able to achieve this with external function but I am looking for a declarative way / all in HTML template.
If you want toggle class use this: http://jsbin.com/vimero/1/edit
<button ng-model="btn" ng-click="btn =! btn" ng-class="{'active' : btn}">
Toogle
</button>
<button ng-model="form.btn" ng-click="form.btn = true"
ng-class="{'active' : form.btn}">
Go
</button>
ng-click="yourFunction($event.target)"
And do your transformations in yourFunction. You'll have HTMLElement passed as 1st param.
I found this works pretty well for a group of buttons to toggle active ng-class if the condition set in ng-click is met:
<button ng-class="{'active' : activeButton == 'firstButton'} ng-click="activeButton = 'firstButton'>
First Button
</button>
<button ng-class="{'active' : activeButton == 'secondButton'} ng-click="activeButton = 'secondButton'>
Second Button
</button>
<button ng-class="{'active' : activeButton == 'thirdButton'} ng-click="activeButton = 'thirdButton'>
Third Button
</button>
Related
I'm trying to click on a button based on the sibling text.
<li ng-repeat="list in lists" ng-if="!includes(list)" class="ng-scope">
<span class="ng-binding">
<button type="submit" class="btn btn-primary" ng-click="useList(list)">Use</button>
test
</span>
<span class="ng-binding">
<button type="submit" class="btn btn-primary" ng-click="useList(list)">Use</button>
test2
</span>
</li>
As shown in the above code, based on test or test2 I want to click on the button accordingly. How can I achieve that?
I'll write some code that takes takes a variable myText and clicks the button; this should work no matter how many span elements you repeat as long as they are in the format shown in your question.
let buttons = element.all(by.css('button'));
for (var button in buttons) {
WebElement parent = (WebElement) ((JavascriptExecutor) driver).executeScript(
"return arguments[0].parentNode;", button);
if (parent.getText() == myText) {button.click()};
}
Try the below one
select(text:string){
const ele = element.all(by.css('li > span > button');
for(i=0;i< ele.count();i++){
if(ele.get(i).getText() === text){
ele.get(i).click();
}
}
Pass the value of the button you wish to click to the above function.
Hope it helps you
I'm using angularjs 1.6 and required to use a specific css library that will disable a button if the button is defined like:
<button disabled="">
My button
</button>
And will enable the button if defined:
<button disabled="">
My button
</button>
I'm trying to enable/disable it based on the latest value from a property in a service within my controller, but the button is always showing as enabled even if someProperty is defined or not .. any ideas?
<button {{ ctrl.myService.getData().someProperty ? '' : 'disabled=""' }}>
My button
</button>
We can achieve this using ng-disabled attribute. SO it's like:
<button ng-disabled="ctrl.myService.getData().someProperty ? true : false">
My button
</button>
Let me know if it helps.
Try using
<button ng-disabled="ctrl.myService.getData().someProperty ? 'disabled': '' ">
My button
</button>
I have two states for a button, "State1" and "State2".
It defaults to "State2". When I click the button, it toggles to "State1".
When I click anywhere outside the button, I need it to change from "State1" back to "State2". This is my code:
<div ng-click="Ctrl.Check = !Ctrl.Check">
<a ng-class="{'btn-danger': !Ctrl.Check, 'btn-default': Ctrl.Check }" >
{{ Ctrl.Check ? 'State1' : 'State2' }}
</a>
</div>
It sounds like you're just checking whether the element has focus. This is much easier than putting down a bunch of ng-click handlers all over your form just to toggle one input.
Use ng-focus and the corresponding ng-blur. If you use HTML elements that can have focus (like a <button>), you can use code like
<button type="button" class="btn"
ng-class="{'btn-danger': !Ctrl.Check, 'btn-default': Ctrl.Check }"
ng-focus="Ctrl.Check = true"
ng-blur="Ctrl.Check = false">
{{ Ctrl.Check ? 'State1' : 'State2' }}
</button>
Demo on plnkr
i want to change class btn-white to btn-primary for the selected Button
$scope.SelectedCombination = function (combinationId) {
$scope.selectedCombination =combinationId;
};
html
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId)" type="button">{{combination.name}}</button>
use ng-class.don't use any javascript function to set css.
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId);clicked=true;" ng-class="{btn-primary:clicked}" type="button">{{combination.name}}
</button>
or you can use best approach:
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId);" ng-class="{'btn-primary':selectedCombination==combination.combinationId}" type="button">{{combination.name}}
</button>
see plunker
There is something called Ng-Class. Ng-class,allow you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.class
I have this html code and if the "modalOptions.actionButtonText" contains "delete" then I need to display danger button instead of primary button
Html Code:
<button class="btn btn-primary" data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
I know we can use "ng-if" to check the condition but is there any way I can use indexOf in angularjs or something else to achieve this?
Looks dirty, but it works.
See working demo
<button class="btn"
data-ng-class="{'btn-primary': modalOptions.actionButtonText.indexOf('delete') == -1,
'btn-danger': modalOptions.actionButtonText.indexOf('delete') > -1}"
data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
The ngClass directive lets you add/remove classes based on a boolean expression. So here, I am adding btn-primary if "delete" isn't found in the button text and btn-danger if it is.
I wanted something similar, but wrote it in shorthand:
<li ng-class="haystack.indexOf('needle') != -1 ? 'active' : 'inactive'">