This seems like it should be easy to do, but I am not sure why this isn't working. All I want to do is pass this string to the function.
I've tried this.
<form ng-submit="edit(type)" ng-init="type='debt'">
I've tried this as well.
<div ng-controller="FormCtrl">
<form ng-submit="edit('debt')">
<input type="submit" value="ADD">
</form>
</div>
and on the js side.
app.controller('FormCtrl', function ($scope, $cookies, $http){
$scope.edit = function(typ){
alert(typ);
}
});
All I want to do is alert out that word 'debt'. All I get is undefined.
All of you code is working fine, as you included $cookies dependency without having angular-cookies.js included in your app (module name ngCookies), it was breaking your page. Eiether you want $cookies there then add the respective reference. Or remove that $cookies reference.
Working Plunkr
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.
Hey so I am having a problem trying to get my child controller working. Basically I have created 2 modules in total. 1 for handling my directives and controllers for them and another to handle my gmail side of things.
//js file
1 var gmailMod = angular.module('gmailMod', []);
gmailMod.controller('gmailCtrl',function gmailCtrl(gmailFactory){
this.authorize = function(){
console.log("clicking");
//gmailFactory.gmailAuthorize();
}
});
//jsFile2
var emailModule = angular.module('emailMod', ['ui.bootstrap']);
I have a third file called config that declares the dependencies
angular.module('seamysApp', ['ngRoute', 'emailMod', 'gmailMod'])
So anyways the email Mod works perfectly but when I try to declare a child controller on my button form the gmailMod
<div ng-controller="gmailCtrl">
<button ng-click="authorize()" class="btn-info" >Not authorized yet! Click here! :)</button>
</div>
Nothing works. I can't get the authorize function to work. Why is this happening does anyone know? I'm getting no errors in my console so I think it must be some logical error by me and it's difficult to find. Thanks in advance for the help.
<div ng-controller="gmailCtrl as gCtrl">
<button ng-click="gCtrl.authorize()" class="btn-info" >Not authorized yet! Click here! :)</button>
</div>
I did a very little application, but binding not working as model to object. How is it possible?
angular.module("simpleapp", [])
.controller("Controller", ['$scope', function($scope) {
$scope.sample = {};
$scope.sample.input = 4;
}]);
<body ng-app = "simpleapp" >
<input ng-model="sample.input" type="text" value="text" />
<div ng-controller = "Controller"><p>input "{{sample.input}}"</p></div>
</body>
You are using simpleapp in HTML and just app in your JS.
They have to be the same in order to work correctly.
Plus you put the input with the scope variable outside the controller. It should be inside.
For example you can edit your html like this:
<body ng-app="app" ng-controller="Controller">
<!-- other divs here -->
</body>
You have to update your body tag from <body ng-app="app"> and then you have put put your input inside the scope of your controller
<body ng-app="app">
<div ng-controller = "Controller">
<input ng-model="sample.input" type="text" value="text" />
<p>input "{{sample.input}}"</p>
</div>
</body>
The answers by Atul,NV Prasad and fbid are absolutely correct.You can view the DEMO here.
One thing that they have missed out is another way to bind your elements to the angular variable.That is using ng-bind.It is used as follows:
<p ng-bind="sample.input"></p>
What's the difference between ng-bind="sample.input" and
{{sample.input}}?
When you load the page, with the {{}} notation, you will see the curly brackets until the angular content is rendered.In the case of ng-bind, you won't.
For more details:LINK and this answer specifically
Use Proper Angularjs Version Library .You need to Go through Angularjs Doucmentation and Try to Understand by experimenting . That Makes you Strong
Some Beginner Mistakes :-
You Should write all the code after assigning Controller to Html
Element . Otherwise Your Code Don't Work even if it is Correct . You need
to assign a variable to Use.
html Code sample (understand Your mistake by taking look at code or the Below Plunkers :-) :-
<body ng-controller = "sampleController">
<input ng-model="sample.node" type="text" />
<p>input "{{sample.node}}"</p>
<input ng-model="sample1" type="text" />
<p>input "{{sample1}}"</p>
</body>
Controller Coding :-
angular.module("sampleApp", [])
.controller("sampleController", ['$scope', function($scope) {
$scope.sample = {'node':1};
$scope.sample1 = 'my first default value';
}]);
Here we go Simple Binding Example :-
http://jsfiddle.net/cmckeachie/Y8Jg6/
Plunker With Little More Concept of Data binding :-
https://plnkr.co/edit/TmAsSCKQDHfXYEbCGiHW?p=preview
Go through Documentation for some more understanding Good Luck !!
Probably silly question, but I have my html form with simple input and password:
<li>
<input type="text" placeholder="Username" ng-model="user.username" />
<a class="iconani usera"></a>
</li>
<li>
<input type="password" placeholder="Password" ng-model="user.password" />
<a class="iconani locka"></a>
</li>
and i want to get value from ng-model to java script
query.equalTo("user", document.getElementById('value from ng-model'));
I use this from parse.com
Can you help me?
In AngularJS, you don't need (and want) to touch your DOM at all to get the data. ng-model directive creates an automated two-way binding between your <input> and your $scope.user variable's properties.
login($scope.user.username, $scope.user.password, ...);
You don't need to touch the form itself at all.
hon2a's answer is the right one ;-) I can try to explain it a bit differently as I also just recently started using angular. A good and simple intro to angular concepts of ng-model and controllers is given at http://www.w3schools.com/angular/angular_intro.asp.
So, all your javascript should be executing in Angular Controllers. In the corresponding controller (i.e. javascript code) the data from HTML form is bound using that angular directive "ng-model" and nothing else. You have your HTML part just fine, assuming you have the angular stuff somewhere linked properly (I would strongly recommend using Yeoman Angular generator to handle that...). At least there should be something like this:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="yourApp" ng-controller="yourController">
<!-- your app part goes here -->
</div>
And then the in the angular controller you actually have that data at hand automatically without doing anything else than just having a constructor/initialiser for it:
angular.module('yourApp').controller('yourController', function ($scope) {
$scope.user = {'username': '', 'userpassword': ''};
// And rest of your stuff goes here...
// In your functions, just use $scope.user.username and $scope.user.userpassword.
}
Hope this helps...
I have just started learning Angular js from w3school.com.
I have a simple question about controller.
As this is my code.
<html>
<body>
<div ng-app="" ng-Controller="HomeController">
<p> {{person.lname}}</p>
<p>First Name = <span ng-bind="person.fname"></span></p>
<p>Enter Details</p>
<p>First Name : <input type="text" ng-model="person.fname"/></p>
<p>Last Name : <input type="text" ng-model="person.lname"/></p>
<p>Middle Name : <input type="text" ng-model="person.mname"/></p>
</div>
</body>
<script src="angular.min.js"></script>
<script>
function HomeController($scope)
{
$scope.person={
fname:'Amit',
lname:'Kumar',
mname:'Verma'
}
}
</script>
</html>
As you can see i have used controller for binding the values.
as soon as i change the value of textbox , it reflect in p tag.
means it called the Homecontroller , but it doesn't calling that controller. i have checked by setting debug point in firbug. It should call the homeController.
As i am new , so it might be a simple question.
As stated by Yoshi, please read the official guide for a better start. They provide tutorials there and then you can start looking from other sources.
To answer your question, the controller HomeController is not actually being called each time a change has been done to its models. Controllers provide a way to group models and functions inside a scope. Inside the controller, you can add functions which can be triggered in your view.
Here is a fiddle that shows your controller with a model and a function inside.
// model
$scope.person = {
fname: 'Amit',
lname: 'Kumar',
mname: 'Verma'
}
// function
$scope.resetNames = function() {
console.log('I am called!');
$scope.person.fname = 'Amit';
$scope.person.lname = 'Kumar';
$scope.person.mname = 'Verma';
}
Good luck with your learning!
Please read Official AngularJS doc on controllers and how they work.
You have probably misunderstood how they work and thus expecting a different result. It is also advised to follow the Official doc guidelines and do the following:
var myApp = angular.module('myApp',[]);
myApp.controller('HomeController', ['$scope', function($scope) {
$scope.person={
fname:'Amit',
lname:'Kumar',
mname:'Verma'
}
}]);
Here's a working fiddle too:
http://jsfiddle.net/hpeinar/LxyL8e5k/
As of angular 1.3, global controller functions are no longer supported.
You should register your controllers in the following way:
app.controller('HomeController', HomeController);