I have condition for ng-show if json response ratingStatusKey = RA_RT_EDITABLE show edit button. how i can achieve this using angularjs.
So far i tried this..
grid.js
template: '</span>'`
Try removing the mustaches from ng-show.
ng-show="ratingStatusKey!==RA_RT_EDITABLE"
You shouldn't use them in angular directives - only in regular DOM attributes. Also make sure RA_RT_EDITABLE is defined in the global scope otherwise the comparison will fail.
Related
I need to add elevateZoom image slider to my Angular application. Following is my html code.
<img id="zoom_03"
ng-src='{{galaryImages[0].w320}}'
data-zoom-image='{{galaryImages[0].original}}'/>
Here
{{galaryImages[0].original}}
and
{{galaryImages[0].w320}}
is being loading dynamically using Ajax call from controller. ng-src is working successfully. but since i have used data-zoom-image as larger image it is executing before controller fetch the results because of that elevateZoom script is not working properly because zoom-image is assign to angular expression which is {{galaryImages[0].original}}. What is the solution to overcome this issue? are there any way to handle attributes like data-zoom-image as angular handling ng-src? or any other solution.
Thanks
Without knowing what elevateZoom is really, I can suggest you do either 1 of 2 things. The first is create a custom directive to handle this. The second is use ng-attr.
With ng-attr, you can do something like
ng-attr-ng-src='{{galaryImages[0].w320}}'
ng-attr-data-zoom-image='{{galaryImages[0].original}}'
I'm not sure how elevateZoom, if it's just taking a snapshot of your variables, then you will have to do something else. If it's built for angular and binds to the variables, then it should work.
If you want it to wait, you can do soethimng like toggling a boolean like
<img id="zoom_03" ng-if="isLoaded"
Where you set is loaded to false by default, then when your ajax call is done you set it to true
.complete(function() {
//apply your logic
$scope.isLoaded = true;
ng-if will take it off the dom completely, and will evaluate when you bring it back on by setting isLoaded to true.
Note: either way you do this I still recommend you bring this into an angular directive, it looks like this is a jquery plug in. The best thing to do is to put it in a directive and apply the logic through the directive, or find one already built for angular. You will find it very difficult to use jquery logic into angular if you don't have a directive. For instance this plug in might be firing on document.ready to look for the custom vars, in which case the ng-if wont work.
Using jQuery, it's easy to replace the innerHtml of a single div, either with content from the elsewhere in the HTML, from a JavaScript var, or from an HTTP call.
How can I do that in AngularJS (without using jQuery)? For example, to keep a page the same, but only replace a side panel?
Try using ng-view / ui-router . More details :
https://docs.angularjs.org/api/ngRoute/directive/ngView
angular-ui/ui-router, how do I inject partial view using $stateProvider?
It seems the answer is: "Think twice if you need to do this." In Angular, the paradigm isn't to modify the HTML, but rather to bind the HTML. So, bind the div's src to a scope or controller var via ngInclude, and just change that var.
I'm playing some experiments using AngularJS and Leaftlet (I'm new at both of them). I see I can specify some HTML as markers.bindPopup(...); parameter. Does anyone tryied to show an AngularJS directive as parameter? I tryed this way whit no success (no surprise) bindPopup(<myDummyDirective></myDummyDirective>). I want to show my directive as marker's popup, is there a way to do this?
Use $compile:
Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.
$compile('<myDummyDirective></myDummyDirective>')(scope);
See the reference: https://docs.angularjs.org/api/ng/service/$compile
Maybe I'm just not thinking straight. Can I enable/disable a link via my controller using some form of angular ng-click and ng-disabled?
Fiddle here
see fiddle...
The 'Do stuff to things' button should not be enabled unless at least one 'thing' is checked, and no action should be taken either. Of course, once a Thing IS checked, the button should activate.
The more I try to fix this, the more complicated it gets, and I can't help but think I'm overlooking something obvious.
Because ng-disabled for INPUT's.
Use ng-class here is an example in fiddle
<a ng-class="{'disabled': things.length==0}" ng-click="doStuff()">Do stuff to Thing(s)</a>
$scope.doStuff = function(){
if($scope.things.length==0) return;
console.log('Stuff has been done to things');
}
First of all, you need to remove the curly around your test if you want to do something with ng-disabled. Generally, you dont need to use them with the native angular directive (except for ng-href..)
Afterward, the ng-disabled dont prevent the ng-click if it's not on a button, so you need to use a button or use a syntaxe like this in your ng-click:
ng-click="condition && doSomething()"
Here is a working example, hope it will help you
http://jsfiddle.net/dxquye40/8/
Check out ryeballer's answer in this post: Angular JS + Button should be enabled if at least one checkbox is checked how To do it?
The plunker ryeballer provided should be modified by flipping the condition in the ng-disabled directive:
ng-disabled="!isChecked()"
Here's an adjusted plunker:
http://plnkr.co/edit/N0az5UeVH0VRlGK1ZwvC?p=preview
This seems very similar to what you want to do.
Keep in mind also that the ng-disabled directive doesn't seem to affect anchor tags. So, if you can, use something else (such as a button element ).
Also, note how your initial solution does not take advantage of Angulars data-binding. Rather than setting ng-click events on your checkboxes, just tell Angular what this data is via the ng-model directive. Let Angular take care of the stuff you've got in your setThing() method.
If you're allowed to use jQuery then you can use .removeClass(), as I did here with your script.
http://jsfiddle.net/kirdua/dxquye40/21/
code
I am trying to build a responsive data table using Angular with a directive and ng-repeat. I have managed to get the ng-repeat to work with tables: http://jsfiddle.net/raff77/Asb8k/
{}
I am now trying to get it to work with a directive and the ng-repeat does not work. http://jsfiddle.net/raff77/uwGXb/3/
{}
Is there a way to get the ng-repeat to work with your directive or should you build that into your directive. Notice I have built out a solution to add the rows as strings then html but i want to avoid this and do things the Angular way.
You are creating a new scope in the directive as shown here
scope: {
gbsdata: '='
},
But "chartdata" is the array you were watching, which is not available in this scope.
scope.$watch("chartdata", function (chartdata) {
Check this fiddle it will help you. http://jsfiddle.net/KLGrV/1/
There seems to be a bug in AngularJS when you want to put 'td's into a table in a directive. See this question Angular Directive Does Not Evaluate Inside ng-repeat and particularly this answer: https://stackoverflow.com/a/15755234/669561.
https://github.com/angular/angular.js/issues/1459
And I don't really see, why you want to fill up the table with a directive. Your first approach without the table seems to work perfectly fine and I cannot see any advanteges over using directives.