Angular Data Binding problems - javascript

So I want the user coming to my portfolio to enter their first name on the index.html page. Then I will welcome the user on the welcome page. How do I pass the information from the index.html to the welcome.html. I'm a novice at angular, your will be very grateful!
index.html:
<header ng-controller="UserName as myApp">
<form >
<label><h1>Enter Your First Name: </h1></label>
<input type="text" ng-model="user.name" name="clients" autofocus />
<button>CLICKME</button>
</form>
<h1>{{user.name}}</h1>
</header>
welcome.html:
<div class="container">
<div class="propic"></div>
<div class="blurb">sfdvsdfvsdv <span ng-controller="FirstCtrl">{{data.message}}</span> fsdv sdfvsdfv sdf fs vsdfv sdfvf f vsdfv sdfv sfdv dsv fdv</div>
</div>
app.js:
(function(){
var myApp = angular.module('myApp', []);
myApp.controller('UserName', function(){
this.product = name;
});
var User = {
name: ""
}
});
Here is the github: https://github.com/wiafe/Portfolio
And here is the page: http://wiafe.github.io/Portfolio/
PS: The h1 that's being bind in index.html can be ignored I was just testing something.

Related

AngularJS Multistep Form Single page application

I am creating a multi step form using AngularJS. I am not getting how to get the previous step. Flow of my form is two way. One can go from step 1 to step 4 via A way step1-->step2-->step3-->step4 and B way is step1-->step3-->step4.
I used <button class="SubmitPrev" ng-click="step = 1">Prev</button> code for getting the previous step. But when user is going by A way then previous step of step3 should be step2 and via B way the previous step of step3 should be step1. In step3, i can not use my previous button code because previous step of step3 depends on which way user is coming. I also tried to create alias of step3 but its increasing the number of lines as my form is consists of many steps with many ways. Is there any other way to call the previous step?
// Code goes here
var app = angular.module("MyApp", []);
app.controller('MyCtrl', function($scope, $timeout) {
$scope.name = '';
$scope.data = {
singleSelect: null,
multipleSelect: [],
option1: 'option-1',
};
$scope.forceUnknownOption = function() {
$scope.data.singleSelect = 'nonsense';
};
});
<!DOCTYPE html>
<html ng-app="MyApp" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-controller="MyCtrl">
<form name='myform' id="myform" ng-init="step = 1" ng-submit="submitForm(myform.$valid)">
<div ng-show="step==1">
<h3>Which step</h3>
<div ng-form='step1form'>
<input type="radio" ng-disabled="!step1form.$valid" ng-click="step = 2"><p>Step 2</p>
<input type="radio" ng-disabled="!step1form.$valid" ng-click="step = 3"><p>Step 3</p>
</div>
</div>
<div ng-show="step==2">
<h3 class="zoomIn">which step</h3>
<div ng-form='step2form'>
<input type="radio" ng-disabled="!step2form.$valid" ng-click="step = 3"><p>Step 3</p>
<button class="SubmitPrev" ng-click="step = 1">Prev</button>
</div>
</div>
<div ng-show="step==3">
<h3 class="zoomIn">which step</h3>
<div ng-form='step3form'>
<input type="radio" ng-disabled="!step3form.$valid" ng-click="step = 4"><p>Step 4</p>
</div>
</div>
<div ng-show="step==4">
<h3 class="zoomIn">which step</h3>
<div ng-form='step4form'>
<p>Finish</p>
</div>
</div>
</form>
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="script.js"></script>
</body>
</html>
you can use: Angular Multi step form
multiStepForm is an angular module to create multi step forms and wizards. Create your steps like your would create your views with ngRoute or ui-router!
some of the main features:
Steps are controlled views and are easily configured
Isolated or non isolated scopes for steps
Track step validity if it contains a form
Store the current and previous step in your controller. So when clicking the previous button, set the current step to the previous step.
If that doesn't make sense, let me know and I'll provide a Plunker.
Here's a quick Plunker to demonstrate:
https://plnkr.co/edit/ofha6qAyNgJZj7XQ5Zk7?p=preview
Html:
<body ng-controller="MainCtrl as main">
<div ng-if="currentStep == 1">
<h1>Step 1</h1>
<button ng-click="setStep(2)">Go to step 2</button>
<button ng-click="setStep(3)">Jump to step 3</button>
</div>
<div ng-if="currentStep == 2">
<h1>Step 2</h1>
<button ng-click="setStep(3)">Go to step 3</button>
</div>
<div ng-if="currentStep == 3">
<h1>Step 3</h1>
</div>
<br>
<button ng-if="previousStep > 0" ng-click="setStep(previousStep)">Go to your previous step ({{previousStep}})</button>
<button ng-if="currentStep > 1" ng-click="setStep(currentStep - 1)">Go to {{currentStep - 1}}</button>
</body>
JS:
var app = angular.module('angularApp', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.currentStep = 1;
$scope.previousStep = 0;
$scope.setStep = function(step) {
if (step == 1) { // If first step hide previous button
$scope.previousStep = 0;
} else {
$scope.previousStep = $scope.currentStep;
}
$scope.currentStep = step;
}
});

Why does not my html file load in this AngularJs Project?

My code looks like this:
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"> </script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.min.js"></script>
<script src = "js/main.js"></script>
</head>
<body>
<div>
<div data-ng-view></div>
</div>
</body>
</html>
main.js
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/view1', {
controller : 'SimpleController',
templateUrl : 'templates/view1.html'
})
.when('/view2', {
controller : 'SimpleController',
templateUrl : 'templates/view2.html'
})
.otherwise({ redirectTo : '/view1' });
}]);
app.controller('SimpleController', function ($scope) {
$scope.customers = [
{name : "John Doe", city : "San Francisco"},
{name : "John Bollinger", city : "Phoenix"},
{name : "Jane Doe", city : "Washington"}
];
$scope.addCustomer = function () {
$scope.customers.push(
{name : $scope.newCustomer.name,
city : $scope.newCustome.city
}
)
}
});
In my js folder, I have another folder called templates. In this we have 2 html files.
view1.html
<div class="container">
<h1>View 1</h1>
Enter a name to search the list
<input type="text" data-ng-model="custName" />
<ul>
<li data-ng-repeat="cust in customers | filter : custName | orderBy : 'name' ">
{{ cust.name }} - {{ cust.city }}
</li>
</ul>
<br />
Customer name: <br />
<input type="text" data-ng-model="newCustomer.name" />
Customer city: <br />
<input type="text" data-ng-model="newCustomer.city" />
<br />
<button data-ng-click="addCustomer()">Add Customer</button>
</div>
and finally...
view2.html
<div class="container">
<h1>View 2</h1>
Enter a name to search the list
<input type="text" data-ng-model="custName" />
<ul>
<li data-ng-repeat="cust in customers | filter : custName | orderBy : 'city' ">
{{ cust.name }} - {{ cust.city }}
</li>
</ul>
</div>
Any ideas why this isn't working? I tried fixing the issue with the ng-route but that didnt work either.
When I open the file, the URL goes to index.html#/view1 indicating the route works, but the webpage is completely empty. None of the html elements load.
Edit:
This is the error I get in developers mode:
XMLHttpRequest cannot load angular.js:8632 file:///E:/Learning%20AngularJs/templates/view1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Note, I do have another templates folder in the directory with index.html containing the 2 view html files.
There is nothing wrong with your code. The problem is you need to host this in a web server i think you are trying to open it from file explorer
You can deploy this in IIS or any other webserver and try.
Or you can follow below steps
make sure you install node js
Open command prompt
Navigate to your root directory
Run the below commands
npm install connect
npm install serve-static
create a file called server.js. put below code
var connect = require('connect'), serveStatic = require('serve-static');
var app = connect();
app.use(serveStatic('.'))
app.listen(5000);
browse http://localhost:5000
It should work. I was able to do this using the code you have given

AngularJS Routing based on Checkbox Selection

I am trying to learn Angular JS with an HTML Sample. I would like the user to fill out some basic information, and based on the checkbox they select, it will load a form page using the UI Routing. It will generate links to navigate the page automatically, based on the checkboxes selected. Then, once the form is complete it should save in a directory on the server, and download to the user computer.
I got the form to show all data as json array, but now nothing is working after trying to add the ability to create the checklist links, as navigation, and saving?
App.js
create our angular app and inject ngAnimate and ui-router
angular.module('formApp', ['ngAnimate', 'ui.router'])
//configuring our routes
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '/form',
templateUrl: 'form.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('form.profile', {
url: '/profile',
templateUrl: 'form-profile.html'
})
// url will be /form/interests
.state('form.interests', {
url: '/interests',
templateUrl: 'form-interests.html'
})
// url will be /form/payment
.state('form.payment', {
url: '/payment',
templateUrl: 'form-payment.html'
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/form/profile'); })
// our controller for the form //
.controller('formController', function ($scope) {
// we will store all of our form data in this object
$scope.prefContactArray = [];
$scope.prefContactArray.push({ name: "Text", reply: "Great we'll text you.", isDefault: false });
$scope.prefContactArray.push({ name: "Email", reply: "Great we'll send you an email!", isDefault: false });
$scope.prefContactArray.push({ name: "Phone", reply: "Great we'll give you a call.", isDefault: false });
$scope.selectedprefContact = $scope.prefContactArray.name;
$scope.selectedprefContactReply = $scope.prefContactArray.reply;
$scope.fruitsList = [
{ id: 1, name: 'Apple', url: 'form/profile.html', state:'.profile' },
{ id: 2, name: 'Banana', url: 'form/interests.html', state:'.interests' },
{ id: 3, name: 'Guava', url: 'form/payment.html', state:'payment' }
];
$scope.selected = {
fruitsList: []
};
$scope.checkAll = function () {
$scope.selected.fruitsList = angular.copy($scope.fruitsList);
};
$scope.uncheckAll = function () {
$scope.selected.fruitsList = [];
};
$scope.create = function () {
var aTag = document.createElement('a ui-sref-active="active" ui-sref="fruitsList.state"
alt="fruitsList.name"');
status-buttons.appendChild(aTag);
$state.go($scope.selected.fruitsList.url);
};
$scope.formData = {};
$scope.submit = function downloadFile(fileName, urlData) {
var aLink = document.createElement('a');
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click");
aLink.download = fileName;
aLink.href = urlData;
aLink.dispatchEvent(evt);
}
var data = $scope.formData;
downloadFile('test.csv', 'data:text/csv;charset=UTF-8,' + encodeURIComponent(data));
});
Form.html
<div id="form-container">
<div class="page-header text-center">
<h2>Let's Be Friends</h2>
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a>
<a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
<a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
</div>
</div>
<div id="splitscreen">
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="signup-form" ng-submit="createQuote()">
<div id="userPanel" class="col-md-6" style="background-color:#999; z-index:2;">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" name="email" ng-model="formData.email">
</div>
<div class="form-group">
<label for="email">Phone</label>
<input type="text" class="form-control" name="email" ng-model="formData.phone">
</div>
<div class="form-group">
<label for="email">Website</label>
<input type="text" class="form-control" name="email" ng-model="formData.web">
</div>
<div ng-repeat="prefContact in prefContactArray">
<label>
<input type="radio" ng-value="prefContact.reply" ng-model="$parent.selectedprefContact" />
{{prefContact.name}}
</label>
</div>{{selectedprefContact | json}}
<div>
<label ng-repeat="fruit in fruitsList">
<input type="checkbox" checklist-model="selected.fruitsList" checklist-value="fruit.id"
ng-click="create()" /> {{fruit.name}}<br />
</label>
<button ng-click="checkAll()">Check all</button>
<button ng-click="uncheckAll()">Uncheck all</button> <br />
{{selected.fruitsList}}
</div>
</div>
</div>
<pre>
{{ formData }}
</pre>
<div id="questions" class="col-md-6">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</div> </form>
</div>
</div>
<!-- show our formData as it is being typed -->
Submit Button Page
Thanks For Your Money!
<button type="submit" class="btn btn-danger">Submit</button> </div>
Index
<!-- CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- JS -->
<!-- load angular, nganimate, and ui-router -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app --> <body ng-app="formApp">
<div class="container col-md-12">
<!-- views will be injected here -->
<div class="col-md-12" ui-view></div>
</div>
In your create() function you use $state.go($scope.selected.fruitsList.url) which will change to the new state, however the value is the template path rather than the state path.
You should use $state.go($scope.selected.fruitsList.state) because the 'to' parameter of $state.go() should be the name of the state that will be transitioned to or a relative state path. If the path starts with ^ or . then it is relative, otherwise it is absolute.
$state
As #Andorov already mentioned, you need $state to navigate. UI Router has offers this service to make it easy for you to go from one state (or route, or page) to another. Add the dependency to your controller like so:
.controller('formController', function ($scope, $state) {
You are now able to say something like $state.go('form.payment') in your controller. This will navigate the person to the Payment form.
So all you would need to do now is when they submit the form (i.e. inside your $scope.createQuote() function which you haven't included in the code yet), find out what state you should go to and end with $state.go(stateToGoto).
Tip:
When I started out with UI router and AngularJs, I just made every route its own page, not using children. If you would do that you would get:
A route for your form
A route for every page it could go to.
Every route has its own controller, which makes it easy to put code in the right place. I don't like sharing the controller between children as it just makes it more difficult to understand which part of the code is for which child.
Does this help?

AngularJS push item does not work

I have put all necessary files into a single file. I want to push item into array when the user clicks on a button. Here is the content:
When I click on the button, nothing happens. Also the data is not repeated/looped and {{}} is shown in angular which means there is a problem.
<script type="text/javascript" src="angular.js" ></script>
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
</div>
</div>
<input type="text" data-ng-model="Namer.name"/>
<input type="submit" data-ng-click="AddName()"/>
<script type="text/javascript">
var App = angular.module("App", []);
App.controller("MyController", function($scope){
$scope.names = [
{ first : "Thomas"},
{ first : "Geferson"},
{ first : "Jenny"},
{ first : "Maria"},
];
$scope.AddName = function(){
$scope.names.push({
name : $scope.Namer.name;
});
};
});
</script>
Working DEMO
var App = angular.module("App", []);
App.controller("MyController", function ($scope) {
$scope.names = [{
first: "Thomas"
}, {
first: "Geferson"
}, {
first: "Jenny"
}, {
first: "Maria"
}];
$scope.AddName = function () {
$scope.names.push({
first: $scope.Namer.name
});
};
});
You need to move your data-ng-click inside Controller.Also you had some syntax issues.That is also i fixed (To work with IE ALSO)
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
<input type="text" data-ng-model="Namer.name" />
<input type="submit" data-ng-click="AddName()" />
</div>
</div>
Move your inputs to inside your MyController so that it executes code in the scope created by the controller:
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
<input type="text" data-ng-model="Namer.name"/>
<input type="submit" data-ng-click="AddName()"/>
</div>
</div>
Another mistake is that you need to change name to first to match with your existing object
$scope.AddName = function(){
$scope.names.push({
first : $scope.Namer.name //change to first and remove the ;
});
};
DEMO

Why I can't change value using function? AngularJS

Why I can't change value using function? AngularJS
html:
<div ng-controler='TestCtrl' id='TestCtrl'>
<h1>Test: {{test.name}}</h1>
<div ng-hide='showTest'>
<div class='content'>
<p>First name: <input ng-model='firstName'></p>
<p>Last name: <input ng-model='lastName'></p>
</div>
<div jq-ui-button ng-click='doSth()'>
Do something
</div>
</div>
</div>
JS:
app.controller('TestCtrl', function ($scope) {
$scope.showTest = false;
$scope.test = {name:'Test name'};
$scope.doSth = function() {
$scope.showTest = true;
}
}
It does not work. But when I write:
<div jq-ui-button ng-click='showTest = true'>
It works.
Where is the problem?
You must write ng-controller not ng-controler. That's why your code is not used. First line in your HTML.

Categories