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
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.
I'm new to Angular, and working on my first full webapp with it.
I have a form with a field that is required. So, I understand that it's bound ngModel value will be undefined. The user can choose to enter the value in the field manually, or they can click a button triggering a function that will populate it.
By default the field is blank and invalid and I'm unable to set it's value from the controller.
In the view:
<input type="number"
min="0"
max="50"
placeholder="0"
name="entry-total-score"
id="entry-total-score"
ng-model="entry.total.score"
required />
In the controller:
$scope.entry.total.score = computedTotal;
How can I initialize that data binding manually?
My guess is that you are simply forgetting to initialize total before trying to set score in your controller. It is also possible that (like Ben Diamant pointed out) that you are not setting your variable in your scope correctly.
The correct way to set it in the scope would be: $scope.entry.total.score = computedTotal;
You should be adding variables to the $scope or to "this" in the controller in order to access those variables in your angular HTML.
If you go the second route you need to make sure that you use the ng-controller="<ControllerName> as <RefName>" then use it in your HTML based on your ref name.
I made an example that I believe does what you want.
http://plnkr.co/edit/fbz1nSHPGZN2k4oYCCFA?p=preview
I hope this helps
you can also use jquery with angular, in your controller.
jQuery('#entry-total-score').val(computedTotal);
if you actually want the work and computedTotal is not a variable use .val("computedTotal")
If you want to only use angular then i think Ben's comments should work. It is nice to know though that angular and jquery play super nice. Instead of using the '$' for jquery just use jQuery and eveything works great. Also make sure to include jquery in your header with a
I want to hide "not same" the very moment password matches. It is not working as it is in plunker. Although i have achieved what I wished by doing this:
ng-hide="obj.newpass==obj.retypepass";
But I want to know, that can I do something like this : http://plnkr.co/edit/m2KoL8VAbm1gIWJWsZ7u?p=preview.
Objects created Inside modals can be accessed outside while it is open ?
A corrected plunker will be helpful.
mike() is not really needed. just change the ng-hide condition from a to obj.newpass == obj.retypepass
see here
I figured it out, use .value
here's demo: http://plnkr.co/edit/wbbzGPKXkjxb1j5J8BSG?p=preview
reason being, modal controller is not in child scope of your main controller. .factory, .value .constant can also be used
I use Angular to operate on table and I have a button to delete a row. I have also written a directive to it. The problems is when I add some new rows dinamically also using Angular the buttons don't work. I read a little bit about it and found out that I should use $compile, so I did. But something is wrong and doesn't work. Here comes the plunk which, I hope, will clarify my problem:
plunker
could you tell me how to make it work?
you have a mistake in $compile. You simply compile wrong html element here is Plunker
Here is my plnkr http://plnkr.co/edit/U5WiZzhX31ifux33enYh
I'm writing a in-place editor directive. It works as expected first time but subsequent times Save or Cancel buttons does not work. Why is that?
In plnkr when I click Save or Cancel 2nd time, it does nothing but in my local dev environment it reloads page.
I'm angular newbie, appreciate your help. Thanks!
If you remove the editor element from the DOM you will have to recompile the template before adding it again, or otherwise you will loose access to the scope.
Change your show function to something like this:
function show(){
editor = $compile(template)(scope);
element.after(editor);
element.hide();
}