I'm trying to hide/show some HTML based on the existence of a function
<div ng-if="!!someFunc"> .... </div>
<div ng-if="someFunc !== undefined"> .... </div>
DEMO
Now the issue is that it doesn't matter if someFunc exists or not, it is always shown. Is there some way to make this work or should I create an other (boolean) variable on the scope ?
UPDATE: I've reproduced the issue here this time with angular v1.3.14
As others have pointed out now, in Angular 1.0, ng-if does not exist. If you have to stay with Angular 1.0, try ng-show instead.
EDIT: I wanted to make it clear that while ng-if and ng-show will both achieve what you are looking for in this case, they do behave differently behind the scenes. In short, when an ng-if expression evaluates to "false", the element will be removed from the DOM. When an ng-show expression evaluates to false, it simply changes the display property of your element. You can read more in detail here.
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
//$scope.test = function () {};
}
<div ng-controller="MyCtrl">
Is there a test function: {{!!test}}
<div ng-show="!!test">CLOSE</div>
</div>
It's something wrong with your AngularJs (too old may be).
I've updated it to new(1.3.14) and it works -
http://jsfiddle.net/HB7LU/15068/
Without any code change:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
//$scope.test = function () {};
}
You fiddle is using angular 1.0.1 which doesn't even contain ng-if (introduced in version 1.1.5). Update the external resource to a newer version or use one of the predefined fiddle frameworks (e.g. angular 1.2).
Both of those attempts work. Something must be wrong with your fiddle. Here's a full example:
var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
//$scope.someFunc = function() {};
});
<div ng-app="app" ng-controller="Ctrl">
<div>Some func: {{ someFunc ? 'yup' : 'nope' }}</div>
<div ng-if="!!someFunc">Has some func</div>
<div ng-if="someFunc !== undefined">Has some func</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
Related
I want to show a div according to a expression but the expression is stored in a variable in string form, is it possible to do evaluate an expression variable for ng-show / ng-hide.
like:
$scope.condition = {"SHOW":'(model1 === 'test1')'}
<div ng-show="condition['SHOW]"></div> something like this.
Try
CONTROLLER
$scope.test = 'test1';
$scope.condition = { show : ($scope.test === 'test1')};
VIEW
<div ng-show="condition.show">something like this.</div>
which is the same as
<div ng-show="condition['show']">something like this.</div>
TIP
Instead of using ng-show / ng-hide, try to use ng-if.
ng-if doesn't watch for changes on the binded variables inside this directive and can improve performance.
<div ng-if="condition['show']">something like this.</div>
Though it's already answered by other post, Just wanted to add..
Since In your question you said.. the expression is stored in a variable in string form, is it possible to do evaluate an expression variable ..
The simple answer is NO you can't evaluate angularjs expression string variable , but you can only evaluate the valid expression.(either by JS or by angular variable)
See this below code, to differentiate
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
myApp.controller('MyCtrl', function MyCtrl($scope) {
$scope.condition = {
SHOW1: "'test' == 'NOTEST'",
SHOW2: 'test' == 'test'
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-show="condition.SHOW1">
1.Not working, as it is simple string("'test' == 'NOTEST'").
</div>
<div ng-show="condition.SHOW2">
2.Working, valid boolean Angular variable
</div>
<div ng-show="'test'=='test'">
3.Working, valid boolean simple JS expression
</div>
</div>
:
How can i pas values to a function with ng-init in a angular project?
i have tried this and it works fine:
<div ng-controller="myCtrl" ng-init="myfunction(1)">
but the problem is, when i do this
<div ng-controller="myCtrl" ng-init="myfunction({{id}})">
or
<div ng-controller="myCtrl" ng-init="myfunction(id)">
it doesn't work!!
if i show the value of {{id}} in my template i get the id: 1
so the id does exist.
what is here the problem?
As Brendan Green mentioned, if id is a scope variable you don't need to pass it to the function. Would something like this work?
$scope.myfunction = function(){
// do whatever with $scope.id
}
If you really need to use it as you are your third example should work. Here is a plunker.
Created a fiddle here: http://jsfiddle.net/frishi/HB7LU/22553/
Basically, pass in the variable itself to the function and not the interpolated value, i.e. {{boo}}
<div ng-controller="MyCtrl" ng-init="boo=2">
<div ng-click="foo(boo)">Click Me</div>
</div>
In order to use myfunction in ng-init, the function should be defined in your $scopebecause ng-init evaluate expressions whatever they may be.
So here is what you should do:
HTML:
<body ng-controller="MainCtrl" ng-init='myfunction("john");'>
<p>Hello {{name}}!</p>
</body>
JS:
app.controller('MainCtrl', function($scope) {
$scope.name = 'Mike';
$scope.myfunction = function(otherName){
$scope.name = otherName;
};
});
Example
Keep in mind that it is not recommended to use ng-init this way:
The only appropriate use of ngInit is for aliasing special properties
of ngRepeat, as seen in the demo below. Besides this case, you should
use controllers rather than ngInit to initialize values on a scope.
In my Angular app, I want a certain div to appear if a variable is true, and to disappear if it is false.
However, it is not working. See my Fiddle
Can anyone help me understand why?
HTML
<div ng-controller="MyCtrl">
<div id="newProjectButton" class="project" ng-click="newProjectActive()" ng-if="!creatingNew">
<h1> + </h1>
<h3> New Project </h3>
</div>
<div id="newProjectActive" class="project" ng-if="creatingNew">
<form>
<input name="name" ng-model="newProjectName" type="text"></input>
<button ng-click="newProject()" type="submit" class='btn btn-primary'>Save</button>
</form>
</div>
</div>
JS
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.creatingNew = false;
$scope.newProjectActive = function () {
$scope.creatingNew = true;
}
$scope.newProject = function () {
alert($scope.newProjectName);
}
}
your angular version is 1.0.1. directive ng-if is not in this version of angular.
its introduce in angular 1.1.5
check this article
and
check it in angular under Directives topic change log
AngularJS first added the ngIf directive in 1.1.5
please update the angular version
here is the Demo
your controller should be like
myApp.controller("MyCtrl" , function($scope) {
because the global controllers are not supported by default in angular 1.3... check this one
First, when I looked at your fiddle, there was older version of your example there,
Second, which actually may be a reason, is in that example you were using angular in version 1.0.1, and i believe that version didn't implement ng-if. Updating to latest version will fix your problem
Good day for everyone!
I have a problem with understanding AngularJS. Can I use my custom filter within ngStyle directive? Why it can't change opacity of span tag at the same time when I change value in input (but it change value in markup)? How I can realize this behaviour without direct using controller scope?
My raw code:
HTML:
<div ng-app="app">
<div ng-controller="AppCtrl">
<input type="number" ng-model="slider" max="10" min="1">
<span ng-style="{'opacity': '{{slider | filter}}'}">TEXT</span>
</div>
</div>
JS:
(function () {
angular
.module('app', [])
.controller('AppCtrl', ['$scope', function ($scope) {
$scope.slider = 6;
}])
.filter('filter', function () {
return function (input) {
return 0.1 * input;
};
});
})();
My code at JSFiddle: http://jsfiddle.net/zkdkLac3/
Answering the general question, yes, generally you can use an user created filter in generic angular expressions. You might be having issues with ng-attr due to a parsing error (probably a bug in the angular parser). You can still use filters in ng-attr with
<span ng-style="{ 'opacity': (slider | opacity) }">TEXT</span>
ng-attr though is most beneficial for binding to style objects directly
<span ng-style="sliderStyle">TEXT</span>
you can also style directly by using
<span style="opacity: {{slider|opacity}}">TEXT</span>
with the below filter:
app.filter('opacity', function () {
return function (input) {
return 0.1 * input;
};
});
Working jsfiddle
Whichever solution is better mainly depends on where you plan to re-use things. Filters are available across all scopes, but this one in particular might only make sense for a given controller. Don't forget that reuse can be accomplished with directives (which can have a controller) as well.
I'm trying to make an angularjs jfiddle for another question, but I can't get it working. Can somebody look at it and let me know what I'm doing wrong?
<div ng-app="myApp">
<div ng-conroller="MyController">
Click me: <input type="checkbox" ng-model="checked"/><br/>
<div>
{{checked}}
</div>
</div>
</div>
js:
var app = angular.module('myApp', [
'ngAnimate',
'my.controllers'
]);
var controllers = app.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
$scope.checked = true;
});
fiddle link
fiddle link without external libraries
fiddle link with only ng-animate ext library
Can it be that it's because jsfiddle adds a "http://fiddle.jshell.net/_display/" in front of any external library location? Like when I try to add "ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js" then jsfiddle changes it to "http://fiddle.jshell.net/_display/ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js"
WHY?
You need to set option no wrap - in <body>
You should use:
var controllers = angular.module('my.controllers', []);
Instead of:
var controllers = app.module('my.controllers', []);
This fiddle works: http://jsfiddle.net/NBhn4/1/
EDIT:
To work with ng-animate you need to include external libraries in correct order and use No-Library (pure JS) option or eg. any jQuery library:
Updated fiddle: http://jsfiddle.net/NBhn4/175/
I am writing my answer for those who land on this page , I was used to use ng-module directive but in jsfiddle after half an hour I realized that ng-module is not allowed and you see no error , and when changed that ng-module to ng-app fiddle worked very well .I just wanted to share this .
<div ng-app="appX" ng-controller="appCtrl">
<p>{{greeting}}
</p>
</div>
var app=angular.module("appX",[]);
console.log(app);
app.controller("appCtrl",function($scope){
$scope.greeting="Hello World";
});
https://jsfiddle.net/furkankatman/trgrjwf1/7/