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
Related
For a mockup I need a simple mechanism like
ng-click="alert('Clicked')"
but the code above is not working, can someone help me? I don't want to touch the Controller..
Refer to previous answer, ng-click = "alert('Hello World!')" will work only if $scope points to window.alert i.e
$scope.alert = window.alert;
But even it creates eval problem so correct syntax must be:
HTML
<div ng-click = "alert('Hello World!')">Click me</div>
Controller
$scope.alert = function(arg){
alert(arg);
}
As far as I know, ng-click works only within your $scope. So you would only be able to call functions, defined in your $scope itself. To use alert, you may try accessing the window element, just by using window.alert('Clicked').
EIDT: Thanks to Ibrahim. I forgot. You shouldn't be able to use window.alert, as far as you won't define:
$scope.alert = window.alert;
In this case, using alert('Clicked') in your ng-clicked directive should work. But at the end, this method would not solve your problem of not touching your controller.
You can use
onclick="alert('Clicked')"
for debugging purposes
As Neeraj mentioned, the accepted answer does not work. Add something like this to your controller to avoid an Illegal Invocation error:
$scope.alert = alert.bind(window);
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 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
I am unable to call a controller function from inside a custom-template with ui-typeahead:
<input typeahead="val for val in autoComplete($viewValue)"
typeahead-template-url="searchAutocompleteTpl.html"
ng-model="query"/>
<script type="text/ng-template" id="searchAutocompleteTpl.html">
<span ng-repeat="eqp in match.model.equipment"/>
<a href="" ng-click="showItem(eqp.model)">
found in: {{eqp.model}}
</a>
</script>
The problem is that the controller's scope seems to be absent in the template:
showItem(eqp.model)
is never called. I have also tried with:
$parent.showItem(eqp.model)
to no avail.
How can I call a function/value on the controller's scope then?
I ran into the same problem and had a look at the typeahead code on github to see if that might offer any clues. It appears that there are several directives involved in the creation of the suggestions list and each gets its own child scope.
In other words, your $parent.showItem(eqp.model) was a good attempt, but you didn't go up enough levels. What worked for me was: $parent.$parent.$parent.showItem(eqp.model)
I also have same problem. I'm not sure but its working.
You can use double $parent instead of single.
e.g. $parent.$parent.showItem(eqp.model)
The solution of your problem is to initiate an object in your template controller scope like this:
$scope.typeaheadObject = {
query : '',
}
now in your form you will need to change your ng-model with:
ng-model="typeaheadObject.query'
This will create the object typeaheadObject in all your controller if you don't re-initiate it in one of your controller. So when you will want to access to the content of the object in one of this controller you will just have to do for example:
console.log($scope.typeaheadObject.query)
This is a classical issue in angularJs. You only can access and modify a parent scope if the variable is stock in an object
Finally you have to use a '.' in your ng-model. This will permit your ui-bootstrap module and your own module to share their scope with the object.
I just did an example on plunker to be sure you understand well the issue.
http://plnkr.co/edit/4YWNMagm571Gk2DrCERX?p=preview
Have a good day :)
It worked for me after adding 4 parents.
$parent.$parent.$parent.$parent.
I am new to angular world.I am trying to create an app with reusable nested directives.
Here is a link to my code.
http://plnkr.co/edit/T2CNKQkLEoxjb3TGdp67?p=preview
I have created two containers and bound them to two set of data.Now if I click the buttons it should show me the data bound to parent scope.But it's showing only one set of data.When i debug it seems that both the buttons are bound to one single scope.How do it separate the scope of this two buttons.
I got it working with some help.
I needed to use ng-click instead of onclick()
If anyone is facing the same problem here is the updated code.Working Code
Thanks
Since there is so much commented code in the plunkr, it is a bit confusing at what you are asking. However one big problem is the line:
<container data="{{pie2}}"></container>
The curly braces {{ tell Angular to write out your variable as a string, so you lose any reference to the variable itself. Instead you would want:
<container data="pie2"></container>
And the scope of the directive would become:
scope :{
data:"="
},
That will help you get the reference you are expecting. Let me know if this gets you on the right path. Or if you can simplify/clarify your quesiton further.