I am new to HTML and Javascript. I am trying to display feedback on my form, so when a user types a matching password and username to what I have in my UserList object, it returns "login successfull" but I cant get this to work.
Heres a plunker if you want to see it in action: https://plnkr.co/plunk/SRS21GqLPAVgA5JU
Heres my code:
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http){
$scope.test = "Test Successful!";
$scope.target = 'https://happybuildings.sim.vuw.ac.nz/api/brownsol/user_list.json'
// retrieves userList JSON file from server
$http.get($scope.target)
.then(function successCall(response){
$scope.output = "Successfully retrieved userList from the server"
$scope.userList = response.data.users;
},
function errorCall(response){
$scope.output = "Error retrieving userList from the server "
$scope.output += " - ErrorCode = "
$scope.output += response.status;
});
$scope.loginValidator = function() {
for(var i = 0; i < userList.length; i++) {
if ($scope.usernameInput == userList[i].LoginName && $scope.passwordInput == userList[i].Password) {
$scope.feedback = 'Login Successful';
return true;
};
};
$scope.feedback = 'Login Failed';
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css">
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>{{test}}</p>
<p>{{output}}</p>
<p>{{userList}}</p>
<div>
<form>
log in
<input type = "text" placeholder = "username" ng-model = "usernameInput"></input>
<input type = "password" placeholder = "password" ng-model = "passwordInput"></input>
<button type = "submit" placeholder = "login" ng-click = "loginValidator()">login</button>
<p>{{feedback}}</p>
</form>
</div>
<p>the first username: {{userList[0].LoginName}}</p>
<p>the first password: {{userList[0].Password}}</p>
</body>
</html>
Typo in function $scope.loginValidator. Instead of $scope.userList, You have used userList Which is not defined. Check console for error.
$scope.loginValidator = function() {
for(var i = 0; i < $scope.userList.length; i++) {
if ($scope.usernameInput == $scope.userList[i].LoginName && $scope.passwordInput == $scope.userList[i].Password) {
$scope.feedback = 'Login Successful';
return true;
};
};
Related
There are no errors or warnings. This function doesn't display the result, instead it shows as:
{{student.fullName}}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app = "mainApp" ng-controller="studentController">
Enter first name: <input type = "text" ng-model = "student.firstName"><br><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
your full name is: {{student.fullName()}}
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Narasimha",
lastName: "Rao",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>
output:
Works like a charm
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Narasimha",
lastName: "Rao",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "mainApp" ng-controller="studentController">
Enter first name: <input type = "text" ng-model = "student.firstName"><br><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
your full name is: {{student.fullName()}}
</div>
The code is working properly. What are you using to run your file?
I have a tab structure made of ng-reapet which shows the content of each tab in a panel (the same one but diff content). I have added
<div ng-controller="myCtrl">
<div ng-include="'tpl.html'">
</div>
</div>
in each tab-panel to display the content according to selected tab and its fine, but when i click on submit within the html(after filling the fields there) I want the ng-include to be replaced with another html (the submit results) template and his controller.
Now i am doing $state.go("url") and its taking me to another page and using route refresh the page.
Try this out,
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="switchCtrl">
<input type='button' ng-value='buttonText' ng-click="doEdit()" />
<div ng-include="template.url"></div>
</div>
</body>
</html>
Controller.js
var app = angular.module('myApp', []);
app.controller('switchCtrl', function($scope) {
$scope.templates = [{
name: 'template-one.html',
url: 'template-one.html'
}, {
name: 'template-two.html',
url: 'template-two.html'
}];
$scope.hasPermissionToEdit = true;
$scope.buttonText = 'Edit';
$scope.isEditing = false;
$scope.shared = 'shared value between templates.';
$scope.template = $scope.templates[0];
$scope.doEdit = function() {
if ($scope.isEditing) {
$scope.template = $scope.templates[0];
$scope.isEditing = false;
$scope.buttonText = 'Edit';
} else {
if ($scope.hasPermissionToEdit) {
$scope.template = $scope.templates[1];
$scope.isEditing = true;
$scope.buttonText = 'Go back';
} else {
alert('you don\'t have permission to edit');
}
}
}
});
Hope this helps !!
I am learning Angularjs and want to use $http.post() method.
In HTML
In Javascript
$scope.onevariable ='value1'
$scope.doSomething = function(){
$scope.onevariable = 'value2';
$http.post('someurl',{onevariable:$scope.onevariable }).then(function(){...})}
The problem is that I want to post the changed $scope.onevariable as parameter to the server, and this variable has to be changed after I click the button. However,this $scope.onevariable can be posted before it has changed to 'value2', so how can I post it exactly after the value has been changed. 'value2' is unknown value to me,or an encrypted string, you can treat it as a random string.
Well, I don't know if I understand your question well, but here's is a snippet working:
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
$scope.onevariable ='';
$scope.post = false;
var increment = 0;
$scope.changeVar = function() {
$scope.onevariable = 'value' + ++increment;
}
$scope.$watch('onevariable', function(newValue, oldValue) {
if (newValue != oldValue && newValue == 'value2') {
doPost();
}
});
function doPost () {
// post
$scope.post = true;
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<button ng-click="changeVar()">Click me</button>
<hr ng-if="onevariable" />
<code ng-bind="onevariable"></code>
<hr />
<code ng-bind="'Post? ' + post"></code>
</body>
</html>
I think $watch would be an option
$scope.$watch('onevariable', function(newValue, oldValue) {
$http.post('someurl',{onevariable:newValue }).then(function(){...})}
});
More about $watch
I am getting the following error: Error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html on this simple code despite its typeof() saying it is a string...
var app = angular.module('app', ['angular.filter', 'ngSanitize']);
app.controller('MainCtrl', ['$scope', '$filter', function($scope, $filter) {
$scope.filters = {};
this.people = [{
name: 'Yasuhito Endo'
}, {
name: 'Dejan Damjanović'
}, {
name: 'Gao Lin'
}, {
name: 'Mohammed Noor'
}];
this.applyFilter = function() {
console.log('Making first names bold...');
this.people = $filter('nameBold')(this.people);
}
}]);
app.filter('nameBold', function($sce) {
return function(items) {
var filtered = [];
angular.forEach(items, function(item) {
var splitIt = item.name.split(" ");
item.name = '<strong>' + splitIt[0] + '</strong> ' + splitIt[1];
console.log('Trusting... ' + typeof(item.name));
// Trusting... string (4x) |
// OUTPUT ------------------
// It outputs as a string yet it gives me the error:
// Error: [$sce:itype] Attempted to trust a non-string value
// in a content requiring a string: Context: html
// --------------------------------
// https://docs.angularjs.org/error/$sce/itype?p0=html
filtered.push(item.name);
});
return $sce.trustAsHtml(filtered);
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script data-require="angular-filter#*" data-semver="0.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.2/angular-filter.js"></script>
<script data-require="lodash.js#*" data-semver="3.10.0" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as viewmodel">
<button ng-click="viewmodel.applyFilter()">Apply the Filter</button>
<div ng-repeat="person in viewmodel.people">
Person: <span ng-bind-html="person.name"></span>
</div>
</body>
</html>
Plunker snippet: http://plnkr.co/edit/rIlETpJ3GeW0YYqrc8NB?p=preview
As you can see from the code, it looks very simple yet the returned item is a string and yet it gives me that big, nasty error.
How do I fix this?
Thanks.
I figured it out. Just take what you put as variable (From object) and put it as as new variable to a string.
app.filter('nameBold', function($sce) {
return function(items) {
var filtered = [];
var itemName = "";
angular.forEach(items, function(item) {
var splitIt = item.name.split(" ");
item.name = '<strong>'+splitIt[0]+'</strong>';
itemName = item.name;
filtered.push(item.name);
});
return $sce.trustAsHtml(itemName);
};
});
I'm doing the tutorial about angularjs. Everything is fine until working with route.
I 'm search about this problem before, but it not working for me.
I'm doing exactly the code which author type but it's not working.
ng-view put in index.html
<html ng-app="githubViewer">
<head>
<title>Demo</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="MainController.js"></script>
<script type="text/javascript" src="github.js"></script>
</head>
<body>
<h1>Github Viewer</h1>
<div ng-view=""></div>
</body>
app.js
(function() {
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo:"/main"});
});})();
MainController.js
(function() {
var app = angular.module("githubViewer");
var MainController = function(
$scope, $interval, $location) {
var decrementCountdown = function() {
$scope.countdown -= 1;
if ($scope.countdown < 1) {
$scope.search($scope.username);
}
};
var countdownInterval = null;
var startCountdown = function() {
countdownInterval = $interval(decrementCountdown, 1000, 5, $scope.countdown);
};
$scope.search = function(username) {
if (countdownInterval) {
$interval.cancel(countdownInterval);
$scope.countdown = null;
}
};
$scope.username = "angular";
$scope.countdown = 5;
startCountdown();
};
app.controller("MainController", MainController);})();
main.html
<div>
{{countdown}}
{{username}}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required placeholder="usẻname to ind" ng-model="username" />
<input type="submit" value="Search" ng-click="search(username)">
</form>
github.js
(function() {
var github = function($http) {
var getUser = function(username){
return $http.get("https://api.github.com/users/" + username)
.then(function(response){
return response.data;
});
};
var getRepos = function(user){
return $http.get(user.repos_url)
.then(function(response){
return response.data;
});
};
return{
getUser : getUser,
getRepos: getRepos
};
};
var module = angular.module("githubViewer");
module.factory("github", github);})();
You have an error in your code:
var MainController = function($scope, $interval, , $location) {
// unnecessary comma here ----^
Remove comma (or insert missing parameter) and your app should start working.
In general I recommend to keep developer console open all the time during coding.