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.
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
I just started to work with Angular, it seems good to implement.
I always use ng-model to get text from textfield.
Can I get the button text with help of ng-model or something else?
I know it's not good question to ask here. but I didn't get any relevant solution for anywhere.
for example this is button
<button class="common btnDarkGrey">Do it</button>
and I want to get Do it with Angular
Thank You.
You should use ng-bind to bind the data in your controller to the button.
<button ng-bind="buttonNameVariable"></button>
Then in your controller you will have a variable named scope.buttonNameVariable="Do it"
You can use the variable in the controller, and retrieve it with the variable. You use ng-model only for input fields in html, not for buttons for example.
how about:
$scope.buttonText = 'Do It' //in the JS
<button>{{buttonText}}</button> <!-- in the HTML -->
or:
<button ng-init="buttonText = 'Do It'">{{buttonText}}</button>
Then you have the text of the button in the buttonText variable.
If you don't mind putting jQuery codes in angular, this could be done:
$('button.common').click(function(){
console.log($('button.common').html())
});
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"
I am trying to obtain form data from the Angular controller without success.
HTML:
<form>
<input type="text" id="entityName" ng-model="ent.Name">
<button class="btn" type="button" onclick="this.blur()" ng-click="$event.preventDefault(); saveData()">Save</button>
</form>`
JS Controller:
$scope.saveData = function() {
console.log($scope.ent.Name);
}
I receive error: Error: $scope.ent is undefined
always give form a name if you want angular validation to work. Shouldn't use onclick in angular app (asking for headaches and creating testing problems) ng-clcik will automatically prevent default so you don't need to add that yourself.
You probably haven't set up an object in scope for ent. If your ng-model values didn't have a dot in them you wouldn't need to register anything in scope for ng-model to work automatically creating a scope property
$scope.ent={};
This will be object that your ng-model properties will bind to. Will need to see more code if this isn't the issue