This question already has answers here:
What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
(3 answers)
Closed 4 years ago.
I have just started learning AngularJS and I am trying to make this simple app with simple inputs, controllers and a firebase database.
Problem is, the $scope params userEmail and userPassword are always undefined in Signin() when I click the button.
HTML relevant code:
<body ng-app="indexApp">
...
<div class="row" ng-controller="loginCtrl">
<div class="hero-text-box">
<br>
<form>
<p class="p2"><label for="email">email</label></p>
<input ng-model="userEmail" id="email1" type="email"
name="email1" placeholder="email">
<p class="p2"><label for="password">pasword</label></p>
<input ng-model="userPassword" type="password" id="password"
name="password" placeholder="password" required>
<a class="btn btn-full" href="#" ng-click="Signin()">הכנס</a>
</form>
</div>
</div>
AngularJS javascript code:
var app = angular.module("indexApp", ["firebase"]); // using firebase
app.controller("loginCtrl", function($scope, $firebaseArray) // AngularJS
will auto add firebase
{
var ref = firebase.database().ref().child("users")
// create a synchronized array
$scope.users = $firebaseArray(ref)
$scope.Signin = function()
{
console.log($scope.userEmail) -- undefined!
....
If you want to use form with angularJS, you should follow angularjs form guide:https://docs.angularjs.org/guide/forms
In your case, you need to move signin() function to html form element.I created a jsfiddle based on your code: http://jsfiddle.net/sxwei123/ADukg/25254/
Hope this would help!
This might help
HTML
<body ng-app="indexApp">
...
<div class="row" ng-controller="loginCtrl">
<div class="hero-text-box">
<br>
<form>
<p class="p2"><label for="email">email</label></p>
<input ng-model="userdata.userEmail" id="email1" type="email"
name="email1" placeholder="email">
<p class="p2"><label for="password">pasword</label></p>
<input ng-model="userdata.userPassword" type="password" id="password"
name="password" placeholder="password" required>
<a class="btn btn-full" href="#" ng-click="Signin(userdata)">הכנס</a>
</form>
</div>
</div>
Controller
var app = angular.module("indexApp", ["firebase"]); // using firebase
app.controller("loginCtrl", function($scope, $firebaseArray) // AngularJS
will auto add firebase
{
var ref = firebase.database().ref().child("users")
// create a synchronized array
$scope.users = $firebaseArray(ref)
$scope.userdata = {};
$scope.Signin = function(data){
console.log(data) // you will get the object
}
Related
I have a problem with ng-if, I am pretty new to angularjs. I want to show/hide a searchbar only on certain views, but it only works after refreshing the page. But it should work, when the view changed.
html:
<div id="searchbarTop" ng-controller="searchbarController">
<form class="col-md-12 py-1" ng-if="!showSearchbarTop">
<div class="input-group">
<input type="text" class="form-control typeahead" id="query"
placeholder="Search for folders or workflows..." data-
provide="typeahead" autocomplete="off" ng-wflist="workflowList" wf-search/>
</div>
</form>
</div>
controller:
ProjectX.controller("searchbarController", function($scope,$http,$location) {
$scope.$root.showSearchbarTop = $location.path() === "/";
...
});
Hope someone can explain me, which mistake I made.
You are using showSearchbarTop as an attribute which is initialized only at the beginning of the page load. That's why, you need to use it as a function.
See the following code
var ProjectX = angular.module('', []);
ProjectX.controller("searchbarController", function($scope, $http, $location) {
$scope.$root.showSearchbarTop = function() {
return $location.path() === "/";
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="searchbarTop" ng-controller="searchbarController">
<form class="col-md-12 py-1" ng-if="!showSearchbarTop()">
<div class="input-group">
<input type="text" class="form-control typeahead" id="query" placeholder="Search for folders or workflows..." data- provide="typeahead" autocomplete="off" ng-wflist="workflowList" wf-search/>
</div>
</form>
</div>
So I have created a SPA that displays student information from a database. I have function to add a student, display student data with specific views and update/delete student records.
I am struggling with the update function. My issue is that when I type a student ID into the search box on the page I cannot get it to pull that specific record from the JSON response from the server. I just can't seem to find the logic to write this correctly.
Here is part of my code, sorry if I have struggled to explain this properly. I could not find any other articles relating specifically to this issue I am having.
Here is the function I am using that is attached to the button on my HTML page, currently I just have it setup to pull the first record in the array (just to prove it will pull the data and fill the fields.
app.controller('editCtrl', function($scope, $http) {
$http.get("getStudentData.php")
.then(function (response) {
$scope.students = response.data;
});
$scope.getRecord = function() {
id = $scope.sid;
$scope.student = $scope.students[0];
And here is part of my HTML:
<div class="form-group">
<label for="sid">Student ID:</label>
<input type="text" class="form-control" id="sid" ng-model="sid">
</div>
<p><button type="button" class="btn btn-primary" ng-click="getRecord()">Get
Student Info</button> </p>
<div class='row'>
<div class="col-md-6">
<div class="form-group">
<label for="first_name">First Name:</label>
<input type="text" class="form-control" id="first_name" ng-
model="student.first_name">
</div>
<div class="form-group">
<label for="last_name">Last Name:</label>
<input type="text" class="form-control" id="last_name" ng-
model="student.last_name">
Pass the sid to your function as,
<p><button type="button" class="btn btn-primary" ng-click="getRecord(sid)">Get
Student Info</button> </p>
and then in controller, use array.find() to get the specific student
$scope.getRecord = function(sid) {
id = sid;
$scope.student = $scope.students.find(s=>s.id ==sid);
}
I'm developing an e-commerce site for learnign purposes.
HTML:
<div class="container">
<form class="log-in-form" ng-controller="ControllerLogin">
<div class="form-group">
<label for="loginEmail">Email address</label>
<input type="email" class="form-control" id="loginEmail" placeholder="Email" ng-model="email">
</div>
<div class="form-group">
<label for="loginPass">Password</label>
<input type="password" class="form-control" id="loginPass" placeholder="Password" ng-model="password">
</div>
<button class="btn btn-default" ng-click="authenticate()">Login</button>
</form>
</div>
Angular javascript
app.controller('ControllerLogin', ['$scope', '$http', 'ServiceLogin', function ($scope, $http, ServiceLogin) {
$scope.authenticate = function () {
console.log($scope.email);
ServiceLogin.auth($scope.email, $scope.password)
.success(function (data) {
alert(data);
});
}
}]);
Every time I console.log the $scope.email, or password. It throws an error of undefined. I'm just starting on angular and I don't know why is not getting the models, I thinks my code is correct. Any help you can give I will be gratefull.
From Angular site:
Note that novalidate is used to disable browser's native form validation.
The value of ngModel won't be set unless it passes validation for the input field. For example: inputs of type email must have a value in the form of user#domain.
Reference: https://docs.angularjs.org/guide/forms
So the reason it may be blank is that it's not a valid email.
You can look at their demo for the email type and see it in action.
I recommend adding:
{{email}}
<br>
{{password}}
somewhere in your html within the controller's HTML scope for your own debugging.
Good luck.
This question already has answers here:
Form validation on ng-click angularjs
(2 answers)
Closed 6 years ago.
This is my form
<form action="" ng-controller="forgotCtrl as forgot" name="forgotForm">
<div class="form-group row">
<label for="email" class="col-sm-2 form-control-label">Email address</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" placeholder="Email Address" required/>
</div>
</div>
<div class="form-group row">
<div>
<button type="submit" class="btn btn-info submitBtn" ng-click="forgotForm.$valid && forgot.redirect()">Submit</button>
</div>
</div>
</form>
The email input is a required field, but HTML5 submits the form even when the field is empty. This only happens when the ng-click event is attached to the submit button. I don't understand why this is happening.
Controller -
'use strict';
angular.module('app')
.controller('forgotCtrl', ['$location', function($location) {
var self = this;
self.email = document.getElementById("email");
self.redirect = function () {
$location.path('/change');
};
}]);
Using the ng-submit event on the form will have the browser check valid HTML5 input and then have Angular do it's stuff.
<form action="" ng-controller="forgotCtrl as forgot"
name="forgotForm" ng-submit="forgotForm.$valid && forgot.redirect()">
See plunker: http://plnkr.co/edit/hWE34zf2IoBQZlw8Qts0?p=preview
But that still has the browser submit the form. That's not how it should be done in Angular (also the document.getElementById("email")).
What you probably want is to remove the type="submit" from the <button> tag and only use Angular's ng-click on the <button> tag. Then Angular can handle both validation and handle the form data.
Please help: hitting my head all the way,I am a new-bee to angular js, building a Quiz Application using angular js,
I have an issue adding array of nested properties to my controller
jsfiddle link showing the issue:
STEP BY STEP SCENARIO
I want to add a question
each question has 4 options, out of which 1 is selected as right
I am able to get the UI but binding is not working for Options
html is as below:
<div ng-app>
<div class="new-question-container" ng-controller="newQuestionController">
<h3>Add New Question</h3>
<form class="new-question-form" novalidate name="newQuestionForm" data-ng-submit="save()">
<div>
<label for="QuestionDescription">Quesiton Description</label>
<input type="text" name="QuestionDescription" data-ng-model="newQuestion.QuestionDescription" required />
</div>
Options<br/>
<div ng-repeat="i in [1,2,3,4]">
<label for="options[i].OptionDescription">Option {{i}}</label>
<input name="options[i].OptionDescription" type="text" data-ng-model="options[i].OptionDescription" required />
Is right answer:
<input type="radio" data-ng-model="options[i].IsAnswer" name="newQuestion" ng-value="true" />Yes
<input type="radio" data-ng-model="options[i].IsAnswer" name="newQuestion" ng-value="false" />No
</div>
<input type="submit" class="btn btn-primary" value="Add Question" data-ng-disabled="newQuestionForm.$invalid" />
Cancel
</form>
</div>
</div>
angular script as below
function newQuestionController($http, $scope, $window) {
$scope.newQuestion = {};
$scope.options = [{}];
$scope.save = function () {
$scope.newQuestion.Options.push(options);
alert($scope.newQuestion.QuestionDescription);
}
}
You have to initialize you $scope correct like this:
$scope.options = [{},{},{},{}];
and change the ng-repeat array to start from 0:
ng-repeat="i in [0,1,2,3]"
Here you can find a working example