Am trying to add a class (blue) to a button when ever you hover the button using AngularJS.
HTML
<button class="btn-add-optimize" ng-mouseover="hover(iets)">Add and Optimize</button>
AngularJS
$scope.hover = function (iets) {
var Dit = this;
Dit.add("blue");
};
Anyone can help me out? Preferable a small example, it would be very appreciated!
I've used something like this with success:
<button
ng-class="{'some-class':hovering}"
ng-mouseenter="hovering=true"
ng-mouseleave="hovering=false">Add and Optimize</button>
Entering and leaving the button toggles $scope.hovering, and the application of some-class is contingent on the $scope.hovering scope variable being true.
<button
ng-class="{'some-class':hovering}"
ng-mouseenter="hovering=true"
ng-mouseleave="hovering=false">Add and Optimize</button>
You should use this form : ng-class
For Angular 8, this works for me:
<nav id="sidebar" [class]="!hovered ? 'active': ''" (mouseenter)='hovered=true' (mouseleave)="hovered=false">
Related
I have a problem in using easyui panel, so I am here needing somebody's help , even thought i find a few people use easyui in stackoverflow.
I have a panel in my page like:
<div class="easyui-panel" title="" id="pp" closed="true" style="width:100%">
</div>
And then, I want to put a value of a input value to this pp panel.
The input value and button code is :
<input type="text" style="width:97%;height:40px" id="drafterId" value='ths'>
bt
Now I want to use drafter function when clicking linkbutton to realize it :
function drafter()
{
var drf=$("#drafterId").val();
alert(drf);//works OK
var drfN="<tr>"+drf+"</tr>";
$('#pp').panel('refresh', 'drf'); //works fail
}
But unlucky, $('#pp').panel('refresh', 'drf');works fail. I have tried another way:
$('#pp').html(drf);
and
$('#pp').innerHTML(drf);
They both failed. Who can help me?
$('#pp').append(drf); works OK
Remove the quotes around the variable name ‘drf’.
So $('#pp').panel('refresh', 'drf');
Becomes$('#pp').panel('refresh', drf);
I want to implement AngularJS ng-class if condition is true how can achieve this task using below code. I am new to AngularJS Any help will be appreciated.
So far tried code....
main.html
<button type="submit" class="btn btn-primary"
ng-disabled="disableSubmitButton"
ng-class="{disableSaveCls:disableSubmitButton}"
ng-click="submitClicked()">Submit</button>
mainCtrl.js
if (PromiseObj.data.StatusLookUpCode === 'COMPLIANCE') {
$scope.disableSubmitButton = true;
};
Add '' in the class name
Try like this
ng-class="{'disableSaveCls':disableSubmitButton}"
DEMO
what you are doing is correct, but you should apply class like this,
ng-class="{'disableSaveCls':disableSubmitButton}"
within single quotes
hi it's a cordova app that use devexpress framework based on knockout i need to set visible only one item in a list
the item should correspond to the param.id or this
id_agenzia:ko.observable(params.id),
i've tryed with jquery (setting the id "#"+$data.id_agenzia visible if == id_agenzia ) but if i integrate it doesn't work
the goal is to do something like this
if i put this line it ignores
how is the right way to set visible only the div that corresponds to $data.id_agenzia is valid for $data.id_agenzia==id_agenzia ?
thank you for help
this is the js code with jsfiddle code added
self.selected_id_agenzia = ko.observable('two');
self.jsonLista = ko.observableArray([
{id_agenzia:ko.observable('one'), nome:'N1'},
{id_agenzia:ko.observable('two'), nome:'N2'}
noDataLabel: noDataLabel,
this is the html code with jsfiddle code added
<div class="list-indentation" data-bind="foreach:jsonLista" style="padding-bottom:60px;">
<div id="$data.id_agenzia" data-bind="visible: id_agenzia()==selected_id_agenzia()">
<div class="agency-description-box" >
<span data-bind="text: $data.id_agenzia" class="agency-name"></span>
<span data-bind="text: $data.nome" class="agency-name"></span>
</div>
</div>
</div>
I think I misunderstood what you were doing with the variables. I have made a simplified fiddle to do what I think you want. To make it work:
I assumed a dxList was more or less like a foreach
I changed the name of the outer id_agenzia to selected_id_agenzia, as I was not able to get the comparison to work using $data and $root to distinguish them
I made both items ko.observables, and used the function call on each in the comparison
</div>
The code is all at the fiddle:
http://jsfiddle.net/3ktq4b9s/
I just started to work with Angular, it seems good to implement.
I always use ng-model to get text from textfield.
Can I get the button text with help of ng-model or something else?
I know it's not good question to ask here. but I didn't get any relevant solution for anywhere.
for example this is button
<button class="common btnDarkGrey">Do it</button>
and I want to get Do it with Angular
Thank You.
You should use ng-bind to bind the data in your controller to the button.
<button ng-bind="buttonNameVariable"></button>
Then in your controller you will have a variable named scope.buttonNameVariable="Do it"
You can use the variable in the controller, and retrieve it with the variable. You use ng-model only for input fields in html, not for buttons for example.
how about:
$scope.buttonText = 'Do It' //in the JS
<button>{{buttonText}}</button> <!-- in the HTML -->
or:
<button ng-init="buttonText = 'Do It'">{{buttonText}}</button>
Then you have the text of the button in the buttonText variable.
If you don't mind putting jQuery codes in angular, this could be done:
$('button.common').click(function(){
console.log($('button.common').html())
});
I am using the following way to use $scope variable ({{func}}() in this case) as function name in ng-click.
<button type="button" ng-click="{{func}}()">Call {{func}}</button></pre>
This works in angularjs-1.2.0rc3. See working plunkr here
Any future version from > 1.2.0rc3 throw this error
What's changed? How can I use the above syntax in current angular version?
Ok first of all I do not recommend such a usage for ng-click because angularjs itself do not support this, but if you still want to use it such a way here is your solution...
<button type="button" ng-click="$eval(functionName)()">...</button>
where
$scope.f1 = function() {
...
};
//name of function as a string
$scope.functionName = "f1";
this is what your are looking for and here is your PLUNKER example...
All I did was append scope to both variables
<form name="angular" ng-controller="Ctrl">
<button type="button" ng-click="{{scope.func}}()">
Call {{func}}
</button>
<label>Status: {{scope.status}}</label>
http://jsfiddle.net/bebold/TmKLY/1/
I wouldn't advise going this route for dynamic variable change, a better choice would be to create a directive and do the binding within the template:
A great explanation can be found HERE.