I am a newbie at Angular JS and this is what I started with:
var myApp = angular.module('myApp', []);
myApp.controller('WizardController', ['$scope', function($scope){
$scope.user = {};
$scope.displayName = 'Hello';
}]);
user is used to gather the data in the input fields in my steps <input type='text' ng-model='user.name'> and when I call it like so {{user.name}} what is inside the input text appears in a next step.
My question is how do I get $scope.displayName to display on my page.
<p ng-model="displayName"></p>
<p>{{displayName}}</p>
<p><input type='text' ng-model='displayName'></p>
I have tried all of these and none seem to work. Please help.
here is a jfiddle http://jsfiddle.net/Fc7KZ/
Make sure you added the ng-app and ng-controller attributes to your html
<body ng-app="myApp" ng-controller="WizardController">
<p ng-model="displayName"></p>
<p>{{displayName}}</p>
<p><input type='text' ng-model='displayName'></p>
</body>
Update 1:
Your js fiddle did not have angular library here is the version corrected:
http://jsfiddle.net/Fc7KZ/2/
You seem to be using angular-wizard. Your Fiddle doesn't include Angular or Lodash, which are both pre-requisites of that project. I'm guess your local code doesn't either, if not then that's your problem.
Related
I have two html pages, main.html and nested.html, so the nested.html is actually included in main.html, this way:
main.html starts
<div ng-include src="'nested.html'"></div>
main.html ends
FULL CODE
nested.html
<html>
<h1> I am included, but controller not sending the values to me. </h1>
<input type="text" id="myDatePicker"/>
</html>
main.html
<html ng-controller="MainCtrl">
<h1> I am main.html and controller working properly on me, please take care of my child **given below** </h1>
<div ng-include src="'nested.html'"></div>
</html>
Controller Code:
(function() {
'use strict';
angular.module('bootstrapApp').controller('MainCtrl', MainCtrl);
function MainCtrl($scope, $location, $http, $compile) {
$("#myDatePicker").datepicker({
orientation: 'left'
});
}
});
The Controller code makes the text field a datepicker using jquery. The input field is in nested.html page. If the controller works on the included page, the textfield becomes a datepicker. That's it
Please guide me through how do I apply the same controller MainCtrl to included nested.html page
Thanks.
There are 2 important things to mention here:
The controller scope of the MainCtrl is already applied to the included nested.html. You can review that in the following Plunker: https://embed.plnkr.co/cvILaL3VvnJ5c1YDHDT1/.
You shouldn't use a jQuery datepicker from out of a AngularJS controller. Instead use a datepicker, which is intended for AngularJS (e.g. angular-datepicker)
from what I can guess,you must be using $scope.someVar and you are trying to render it in ng-include. Try creating an obj inside the controller like below:
$scope.obj= {
someVar : 'Value'
};
and use it in ng-include i.e. nested.html as {{obj.someVar}}.
Update 1
As per your new update, try AngularJS datepicker and let me know.
Try to add controller into nested.html file like:
<div ng-controller="MainController">
<h1> I am included, but controller not sending the values to me. </h1>
<input type="text" id="myDatePicker"/>
</div>
And from your comment:
I'm new AngularJS, I'm trying to test the most basic form using AngularJS in JSFiddle. I'm not sure if I forget to configure anything in JSFiddle, but it is not working and it should.
I followed a basic sample from here.
I also include the CDN from here.
Here is the Angular code:
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "John";
});
Link to my Fiddle: http://jsfiddle.net/bheng/tth4guev/
Settings
include
How would one go about debugging this further?
There are two things missing
(i) You need to add ng-app directive as follows,
<div ng-app="myApp" ng-controller="formCtrl">
(ii) Change the angular.js script version above 1.1 to use without a global controller, and change load type as No wrap in <head>
WORKING FIDDLE
I see, you did not add a name to your controller,and Angular App but in the JS you are accessing 'formctrl'. Go ahead and add a div around the form and add a ng-app='myApp' and a ng-controller='form-ctrl' to your form and it should work.
You need to wrap the form tag in a div tag with ng-app attribute. Your h1 tag should be encapsulated within the div tag as well...
Here's a working example:
<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>
So here's the thing I saw with your code:
You need to add the name of the App and the controller to the div.
Also you are repeating the name of the person in both fields, if you wish you can make an object with the person information to access each of his data fields:
<div ng-app="myApp" ng-controller="formCtrl">
<form>
Email: <input type="text" ng-model="person.firstname" />
Password: <input type="text" ng-model="person.password" />
</form>
<h1>You entered: {{ person.firstname }}</h1>
</div>
<script>
var myApp = angular
.module("myApp",[])
.controller("formCtrl", function($scope) {
//here's the object called "person":
var person = {
firstname: "John",
password: "password"
};
$scope.person = person;
});
</script>
I am building a drum machine using AngularJS and having issues adjusting the tempo from the user interface.
I have got the object "this.tempo=120" & "<input class="bpm-input" type="number" onchange="updateBPM()" min="100" max="150" ng-model="$ctrl.tempo"></input>"
This doesn't seem to update the tempo value, only the value shown in the input box.
What function would I need to update the value within the controller?
It is normal, when you use AngularJS, you need to use the Angular WAY.
In other words, what angular do for you is the only way to do it.
AngularJS drastically control your DOM and use it as a copy.
If you change the DOM without the angular behavior, angular cannot update his copy and throws bad behaviors.
You need to use all Angular things, to tell him to apply his magic on your DOM.
Change your onclick attribute by ng-click angular directive, put your updateBPM into your controller scope, and this will works.
Hope that helps you!
Basic things you can do are as in the attached snippet also try having Angular patterns for a manageable code base and good performance Patterns
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myController as myCtrl">
<input class="bpm-input" type="number" ng-change="myCtrl.updateBPM()" min="100" max="150" ng-model="myCtrl.tempo"></input>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
var myCtrl = this;
myCtrl.tempo=120;
myCtrl.updateBPM = function(){
alert(myCtrl.tempo);
}
});
</script>
</body>
</html>
Code is attached below
<script>
var mainModule = angular.module('mainModule', [])
.controller('mainCntrl', function($scope) {
var vm = this;
vm.tempo = 120;
});
</script>
<div ng-app="mainModule">
<div ng-controller="mainCntrl as ctrl">
<input class="bpm-input" type="number" min="100" max="150" ng-model="ctrl.tempo"></input>
</div>
</div>
I found some code here: Textarea limit characters for each row in javascript
I want to use it in my project, but I'm having trouble figuring out how to make it work in Angular, particularly setting the directives.
Here's the relevant fiddle: http://jsfiddle.net/aSU7x/
Do I just change
onchange="Validate(this)" onkeyup="Validate(this)"
to
ng-change="Validate(this)" ng-keyup="Validate(this)"
?
I'm still not too familiar with Angular, and I'm only slightly more familiar with jQuery. What would I have to do with the scope, controller, etc.? What would a proper Angular implementation of this code look like? Thanks for the time.
Basic idea of calling a function in angular using scope and $event
angular.module('changeExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.keyupfnc = function(evt) {
console.log(evt.which);
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="changeExample">
<div ng-controller="ExampleController">
<input type="text" ng-keyup="keyupfnc($event)" />
</div>
</div>
I have a project where I'm currently trying to refactor an old system that was hinged on jquery from the ground up with angular 1.x. However, there are a lot of old HTML forms that I'd like to reuse the bulk of so I don't want to recreate them. I'd love it if there was a way to keep it purely angular, but I'm honestly at a loss of how I'd do that (or whether or not I can). I'm fairly new to angular so there are a lot of inner workings to it that I'm still not privy to.
I've searched around on google and other places including here and I can't really even find other people talking about it. That tells me that either I'm searching badly or it's something that I should probably not be working towards.
All the html pages have identically id'd fields so I feel I can reliably base things on that. For example: all forms with first name text boxes have an id of "cl_fname".
Is there anyway that I can accomplish: getting the form, adding an ng-model="cl_fname" or something to the relevant tag and then display the form? I've gotten to the point where I can get the html page, hold it in the scope and then display using ng-bind-html, but figuring out how to add angular attributes to specific elements I can't figure out.
You can achieve this with jQuery and the attr() method.
I created a plunker here that demonstrates adding angular to an existing "plain" html form.
In the example, I'm using id selectors, but you could use any combination of selectors to ensure you get the right elements.
The below is a quick code snippet from my Plunker example:
HTML:
<div ng-app="myApp">
<form id='myForm1' data-test="test2">
<span>First Name:</span>
<input type="text" id="myForm1_firstName" />
<input type="submit" id="myForm1_Submit" value="Go!" />
</form>
</div>
JS:
// set up angular
var myApp = angular.module('myApp', []);
myApp.controller('MyForm1Controller', ['$scope', function($scope) {
$scope.firstName = 'Angular Working!';
}]);
// use jQuery to add the relevent attributes to our form
var jqMyForm1 = $('form#myForm1');
var jqTxtFirstName = jqMyForm1.find('input[type="text"]#myForm1_firstName');
//add controller to form
jqMyForm1.attr('ng-controller', 'MyForm1Controller');
//bind the textbox to the angular 'firstName' variable
jqTxtFirstName.attr('ng-model', "firstName");
EDIT:
just realised you want to load the html form dynamically.
Version 2 of the plunker (here) will now dynamically load a HTML form from an external resource (separate html page), inject it into the current page, add the angular bindings to it, and then get angular to recognise it.
The key to getting angular to recognise the form is the use of the $compile object (angular $compile documentation).
Again, quick snippets of the code in use:
HTML (main page):
<div ng-app="myApp" ng-controller="LoadingController"></div>
HTML (myForm1.html):
<form id='myForm1' data-test="test2">
<span>First Name:</span>
<input type="text" id="myForm1_firstName" />
<input type="submit" id="myForm1_Submit" value="Go!" />
</form>
JS:
// set up angular
var myApp = angular.module('myApp', []);
// main controller for loading the dynamic form
myApp.controller('LoadingController', ['$scope','$http','$compile', function($scope,$http,$compile) {
$scope.loadHtmlForm = function(formURL) {
$http.get(formURL).then(function successCallback(response){
var jqForm = $(response.data);
var jqTxtFirstName = jqForm.find('input[type="text"]#myForm1_firstName');
//add controller to form
jqForm.attr('ng-controller', 'MyForm1Controller');
//bind the textbox to the angular 'firstName' variable
jqTxtFirstName.attr('ng-model', "firstName");
$('div').append(jqForm);
$compile(jqForm[0])($scope);
});
}
$scope.loadHtmlForm('myForm1.html');
}]);
// form controller for managing the data
myApp.controller('MyForm1Controller', ['$scope', function($scope) {
$scope.firstName = 'Angular Working!';
}]);