Why does the second button not work, when ng-if is used?
I want to realize a button that is present only when the model value is set / not ""/ not null.
Template:
<input type="text" ng-model="blub"/>
<br/>
<button ng-click="blub = 'xxxx'">X</button>
<br/>
<button ng-click="blub = 'yyyy'" ng-if="blub.length">Y</button>
Controller:
angular.module('test', [])
.controller('Main', function ($scope) {
// nothing to do here
});
To play around: JSFiddle
Use ng-show Instead of ng-if. That should work.
Fiddle
It doesn't work because ng-if is creating a new scope and interpreting your blub = 'yyyy' as defining a new local variable in the new scope.
You can test this by putting the second button to:
<button ng-click="$parent.blub = 'yyyy'" ng-if="blub.length">Y</button>
However $parent is an ugly feature.
The button doesn't work because of the nested scope created by ng-if. The blub bound to the second button is not the same blub that's bound to the first one.
You can use ng-show instead of ng-if, since it uses its parent's scope, but that's just avoiding the problem instead of solving it. Read about nested scopes so you can understand what actually happened.
Also, check this out: fiddle
Try putting a magic dot on the variable
<input type="text" ng-model="bl.ub"/>
<br/>
<button ng-click="bl.ub = 'xxxx'">X</button>
<br/>
<button ng-click="bl.ub = 'yyyy'" ng-if="bl.ub.length">Y</button>
jsfiddle
you can use : [hidden]="!expression"
Related
ng-if is not working when I change the values through simple javascript function.My function is getting called but the changes in values cannot be seen in view. Please refer below code.
HTML
<div id="span" ng-app='MyModule' ng-cloak ng-controller="MyController">
<div ng-if="!bool">
This is for true
</div>
<div ng-if="bool">
This is False
</div>
{{bool}}
<br>
<input type="submit" ng-click = "myfunction('test')" value="ng-if button">
</div>
<input type="submit" onClick = "check1()" value="simple JS button">
JS
angular.module('MyModule', [])
.controller('MyController', function ($scope) {
$scope.bool = true;
$scope.myfunction = function (data) {
$scope.bool = !$scope.bool;
};
});
function check1() {
angular.element(document.getElementById('span')).scope().myfunction('test');
}
When I use ng-click button it changes value of bool changes, but same doesn't happens with simple JS button . Actually I am implementing Angular in a page that already uses jQuery, so I need to use simple JS button.
JS Fiddle : JS Fiddle
At first, ng-click is able to parse an angular expression.
Second, it handles the reference to the current scope and performs a call to $scope.$apply to notify any watchers to update. If you would add a call to angular.element(document.getElementById('span')).scope().$apply() in your function, it should work as expected.
Use $scope.apply . This is because angulars digest cycle will not know if your value changes outside of its scope like in a simple JS function.
As a new "Angularian", I have this:
<div data-ng-app="" data-ng-init="">
<input type="text" ng-model="hello">
<p>{{hello}}</p>
</div>
But I wonder, how can I console.log whatever I type in the expression (ng-model)?
(e.g. if I type "Soylent Green is people" in the text field I want to see it in Chrome's Inspector window)
You can use console.log($scope.hello); inside your controller.
I suggest you to take a look about Addons/Extensions like Batarang and
ng-inspector.
This is the newest one, and as the name suggests, it allows you to inspect your application's scopes.
Use ng-change directive with your input tag like
<input type="text" ng-model="hello" ng-change="textChange()" >
and in your controller
$scope.textChange = function () {
console.log($scope.hello);
}
https://jsfiddle.net/walioulislam/wpjwavrc/
You have a controller for this app, if you don't know about controllers you can read the documentation in w3schools
You can do console.log($scope.hello) inside your controller
By default each and every variable you define in HTML is inside $scope object
In HTML I have this line of code:
<input type="text" class="training-comment" placeholder="Enter comment" ng-model="content" data-ui-keypress="{13:'keypressCallback($event)'}">
And in controller this:
$scope.keypressCallback = function ($event) {
console.log("comment is", $scope.content);
$event.preventDefault();
};
And when I enter some text in input and press enter in console I see that $scope.content is undefined.
Why is this ?
I put together a Plunker example here using the Angular UI and basically copying the code from the question. I then took this example and added an ng-repeat to demonstrate one of the most common issues I have seen: scope issues:
<div ng-repeat="x in collections">
<input type="text" class="training-comment" placeholder="Enter comment"
ng-model="content" data-ui-keypress="{13:'keypressCallback($event)'}" />
<br /><br />
</div>
You can find this updated plunker example here. Basically whenever you use an ng-repeat or any other directive that creates a new scope your model exists in that scope - not the parent or root scope. This means that your code might be working, but it is printing out the value from the wrong scope! For more information on scopes see the angular documentation here.
To use the plunker demo, type into the first input and press the enter key, the model will be updated. But, if you type into either of the other two boxes, though, the model will either not be updated or it will be undefined (if you have never typed into the first box).
Even if this isn't the exact issue, hopefully it will still help. Best of luck!
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.
I'm new to AngularJS, and I've put an ng-click on a radio button generated by
ng-repeat, and the click event refuses to fire. If I use a simple onclick,
that does work though.
This works, and I see the alert:
<div class="span2 left-justify"
ng-repeat="choice in physicalmode_choices">
<input type="radio"
name="physical_layer"
value="{{ choice.private }}"
onclick="alert('foo')"
required
ng-model="$parent.networkoptions.physicalmode" />
<span ng-bind="choice.public"></span>
</div>
But this does not:
<div class="span2 left-justify"
ng-repeat="choice in physicalmode_choices">
<input type="radio"
name="physical_layer"
value="{{ choice.private }}"
ng-click="alert('foo')"
required
ng-model="$parent.networkoptions.physicalmode" />
<span ng-bind="choice.public"></span>
</div>
Can I not do this with an ng-click? Or am I misunderstanding what an "expression" is?
Thanks,
Mike
To clarify DerekR's answer.
When angular sees
ng-click='alert("test")'
it looks for
$scope.alert
which is likely to be undefined.
You need to provide a proxy method on the scope, or possibly even rootscope.
For example:
$rootScope.log = function(variable) {
console.log(variable);
};
$rootScope.alert = function(text) {
alert(text);
};
See: http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED#scopemethods
When you call something inside of an ng-click the parsing service evaluates expressions against the scope rather than the global window object.
If you wanted to do an alert inside of an ng-click then could write a method on the scope or parent scope that in turn calls the alert.
I created this jsFiddle to show how it works.
http://jsfiddle.net/tM56a/1/
<li ng-repeat="menu in menus" >
<a ng-click="test(menu)">click me</a>
</li>