I want to refresh a html table using AngularJs.
Infact this is my code homepage code
<body ng-app="myApp">
<div class="generic-container" ng-controller="UserController as ctrl">
<div id="createUserContent.jsp" ng-include="createUserContent"></div>
<div id="editUserContent.jsp" ng-include="editUserContent"></div>
<div id="deleteUserContent.jsp" ng-include="deleteUserContent"></div>
<table>
<tr>
<td><button type="button" class="btn btn-primary"
ng-click="ctrl.openCreateUser()">Create</button></td>
</tr>
</table>
<table class="table table-hover">
<thead>
<tr>
<th>ID.</th>
<th>Name</th>
<th>Address</th>
<th>Email</th>
<th width="20%"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in ctrl.users">
<td><span ng-bind="u.ssoId"></span></td>
<td><span ng-bind="u.firstName"></span></td>
<td><span ng-bind="u.lastName"></span></td>
<td><span ng-bind="u.email"></span></td>
<td>
<button type="button" ng-click="ctrl.openEditUser(u)"
class="btn btn-success custom-width">Edit</button>
<button type="button" ng-click="ctrl.openDeleteUser(u)"
class="btn btn-danger custom-width">Remove</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
Now i have the createUserContent which is
<form role="form" ng-controller="UserController as ctrl" >
<div class="form-group">
<label for="FirstName">FirstName</label> <input type="FirstName"
ng-model="ctrl.user.firstName" class="form-control"
id="FirstName" placeholder="Enter FirstName" /> <label
for="lastName">lastName</label> <input type="lastName"
class="form-control" id="lastName"
ng-model="ctrl.user.lastName" placeholder="Enter lastName" />
<label for="email">Email address</label> <input type="email"
ng-model="ctrl.user.email" class="form-control" id="email"
placeholder="Enter email" />
</div>
<div class="form-group">
<label for="homeAddressLocation">Home Address</label> <input class="form-control"
ng-model="ctrl.user.homeAddress.location" id="homeAddressLocation"
placeholder="homeAddressLocation" />
</div>
<div class="form-group">
<label for="SSOId">SSOId</label> <input class="form-control"
ng-model="ctrl.user.ssoId" id="SSOId" placeholder="SSOId" />
</div>
<button type="submit" class="btn btn-default"
ng-click="ctrl.saveUser(ctrl.user)">Save</button>
<button type="submit" class="btn btn-default">Cancel</button>
</form>
Now when i finish saving the user i want my table to automatically refresh but i don't know how to do it.
I tried $apply but in vain This is my angular js code:
App.controller('UserController', function($scope, UserService, $window,$log,$uibModalStack, $rootScope,
$uibModal) {
var self = this;
self.user = {
id : null,
username : '',
address : '',
email : ''
};
self.users = [];
self.fetchAllUsers = function() {
UserService.fetchAllUsers().then(function(d) {
self.users = d;
if(!$scope.$$phase) {
$scope.$apply();
}
}, function(errResponse) {
window.alert(errResponse);
console.error('Error while fetching Currencies');
});
};
self.saveUser = function(user) {
UserService.createUser(user);
$log.log("saving user");
$uibModalStack.dismissAll();
$rootScope.$on('saveUserWithSuccess', function (event, data) {
self.fetchAllUsers();
if(!$scope.$$phase) {
$scope.$apply();
}
You don't need to do $scope.$apply, you're doing it right already :) Just make sure your UserService returns the actuall array with users, and not an object containing data.users[].
Does your UserService.createUser() return a promise? In that case, I would do UserService.createUser().then(function(){ self.fetchAllUsers(); \); instead of using $rootScope.$on('saveUserWithSuccess'.
Also, you shouldn't inject $rootScope in a controller. Only use $scope.$on in a controller, and $rootScope.$broadcast in a service.
Related
I am trying to implement the search filter for the following application using angularjs. But it's not working as intended. I am new to this so I am not sure what I've done wrong here. Can someone help?
Here is my code so far:-
index.html file :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="Controller/app.js"></script>
<script src="Controller/storage.js"></script>
</head>
<body ng-app="kfgPm">
<div ng-controller="MainCtrl" class="container">
<form name="kfgPmForm" ng-submit="submitForm(kfgPmForm.$valid)" novalidate>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="projectID" class="col-sm-3 col-form-label">Project ID: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectID" required ng-model="itm.projectID">
</div>
</div>
<div class="form-group col-sm-6">
<label for="projectName" class="col-sm-3 col-form-label">Project Name: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectName" required ng-model="itm.projectName">
</div>
</div>
</div>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="projectOwner" class="col-sm-3 col-form-label">Project Owner: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectOwner" required ng-model="itm.projectOwner">
</div>
</div>
<div class="form-group col-sm-6">
<label for="keyStake" class="col-sm-3 col-form-label">Key Stakeholders: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="keyStake" required ng-model="itm.keyStake">
</div>
</div>
</div>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="prepBy" class="col-sm-3 col-form-label">Prepared By: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="prepBy" required ng-model="itm.prepBy">
</div>
</div>
<div class="form-group col-sm-6">
<label for="reqDate" class="col-sm-3 col-form-label">Requested Date: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="reqDate" required ng-model="itm.reqDate">
</div>
</div>
</div>
<div class="col-sm-12" class="form-group" ng-submit="submitDetails()" role="form">
<div class="form-group col-sm-6" class="input-group mb-3">
<label for="inputGroupSelect01" class="col-sm-3 col-form-label">Status: </label>
<div class="col-sm-9">
<select name="status" class="form-control custom-select" ng-options="user.option for user in arrlist" required ng-model="user.itm.status">
<option value="">Select..</option>
</select>
</select>
</div>
</div>
<div class="form-group col-sm-6">
<label for="dept" class="col-sm-3 col-form-label">Department: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dept" required ng-model="itm.dept">
</div>
</div>
</div>
<div class="col-sm-12" class="form-group purple-border">
<div class="col-sm-2">
<label for="projSummary">Project Summary: </label>
</div>
<div class="col-sm-10">
<textarea class="form-control" id="projSummary" required ng-model="itm.projSummary" rows="3"></textarea>
</div>
</div>
</form>
<div class="form-row text-center">
<div class="col-12">
<button ng-disabled="kfgPmForm.$invalid" ng-click="update(itm)" class="btn btn-info">SUBMIT</button>
<div><br></div>
</form>
<div><br></div>
<div class="col-sm-12" class="form-horizontal">
<label for="search" class="col-sm-3 col-form-label">Search: </label>
<div class="col-sm-6">
<input ng-model="searchText" class="form-control" ng-keyup="filterFunc()">
<div><br></div>
</div>
</div>
<div class="results">
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead class="thead-light">
<tr>
<th>Project ID</th>
<th>Project Name</th>
<th>Project Owner</th>
<th>Key Stakeholders</th>
<th>Prepared By</th>
<th>Requested Date</th>
<th>Status</th>
<th>Department</th>
<th>Project Summary</th>
<th>ACTIONS</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="itm in master | filter: itm.search">
<td><span ng-hide="editMode">{{itm.projectID}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectID" />
</td>
<td><span ng-hide="editMode">{{itm.projectName}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectName" />
</td>
<td><span ng-hide="editMode">{{itm.projectOwner}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectOwner" />
</td>
<td><span ng-hide="editMode">{{itm.keyStake}}</span>
<input type="text" ng-show="editMode" ng-model="itm.keyStake" />
</td>
<td><span ng-hide="editMode">{{itm.prepBy}}</span>
<input type="text" ng-show="editMode" ng-model="itm.prepBy" />
</td>
<td><span ng-hide="editMode">{{itm.reqDate}}</span>
<input type="text" ng-show="editMode" ng-model="itm.reqDate" />
</td>
<td><span ng-hide="editMode">{{itm.status.option}}</span>
<input type="text" ng-show="editMode" ng-model="itm.status" />
</td>
<td><span ng-hide="editMode">{{itm.dept}}</span>
<input type="text" ng-show="editMode" ng-model="itm.dept" />
</td>
<td><span ng-hide="editMode">{{itm.projSummary}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projSummary" />
</td>
<td>
<button ng-click="EditProject(itm)" class="btn btn-primary">Edit</button>
<button ng-hide="editMode" ng-click="removeItem($index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
</div>
</body>
</html>
This is my app.js file:
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
if (isHtml5Compatible) {
initiateLocalStorage();
}
function initiateLocalStorage() {
var app = angular.module('kfgPm', ['storageService']);
app.controller('MainCtrl', ['$scope', 'getLocalStorage', function($scope, getLocalStorage) {
$scope.EditProject = EditProject;
$scope.master = getLocalStorage.getData();
$scope.master = [];
$scope.update = function() {
var IsNew = true; //if the data entered in the field is new
angular.forEach($scope.master, function(LItem, key) {
if (LItem.projectID == $scope.itm.projectID) { //if the new project ID equals old project ID
IsNew = false; //data entered is to be edited
LItem.projectID = $scope.itm.projectID;
LItem.projectName = $scope.itm.projectName;
LItem.projectOwner = $scope.itm.projectOwner;
LItem.keyStake = $scope.itm.keyStake;
LItem.prepBy = $scope.itm.prepBy;
LItem.reqDate = $scope.itm.reqDate;
LItem.status = $scope.itm.status;
LItem.dept = $scope.itm.dept;
LItem.projSummary = $scope.itm.projSummary;
}
});
if (IsNew) { //if new data
$scope.master.push({ //add to the fields
'projectID': $scope.itm.projectID,
'projectName': $scope.itm.projectName,
'projectOwner': $scope.itm.projectOwner,
'keyStake': $scope.itm.keyStake,
'prepBy': $scope.itm.prepBy,
'reqDate': $scope.itm.reqDate,
'status': $scope.itm.status,
'dept': $scope.itm.dept,
'projSummary': $scope.itm.projSummary,
});
}
getLocalStorage.update($scope.master);
$scope.itm.projectID = '';
$scope.itm.projectName = '';
$scope.itm.projectOwner = '';
$scope.itm.keyStake = '';
$scope.itm.prepBy = '';
$scope.itm.reqDate = '';
$scope.itm.status = '';
$scope.itm.dept = '';
$scope.itm.projSummary = '';
},
$scope.removeItem = function(index) {
console.log(index);
$scope.master.splice(index, 1)
getLocalStorage.update($scope.master);
},
$scope.editItem = function(index) {
getLocalStorage.update($scope.master);
$scope.editing = $scope.master.indexOf(index);
}
function EditProject(pItem) { //if edit is clicked the data is replaced in respective fields
$scope.itm.projectID = pItem.projectID;
$scope.itm.projectName = pItem.projectName;
$scope.itm.projectOwner = pItem.projectOwner;
$scope.itm.keyStake = pItem.keyStake;
$scope.itm.prepBy = pItem.prepBy;
$scope.itm.reqDate = pItem.reqDate;
$scope.itm.status = pItem.status;
$scope.itm.dept = pItem.dept;
$scope.itm.projSummary = pItem.projSummary;
console.log(pItem);
}
$scope.arrlist = [{
"id": 1,
"option": "One"
}, {
"id": 2,
"option": "Two"
}];
$scope.userselected = $scope.arrlist[1];
$scope.LItem = angular.copy($scope.update);
$scope.filterFunc = function() {
$scope.LItem = $filter('filter')($scope.update, { $: $scope.searchText });
}
$scope.submitForm = function(isValid) {
if (isValid) {
alert('Submitted Successfully');
}
};
}]);
}
I am trying to implement the search for all columns such that when I type something in the search text field, it should return only the row with those searched terms and the rest of the rows would be hidden in the table.
To start, I see the following problems:
<body ng-app="kfgPm">
<div ng-controller="MainCtrl" class="container">
<form name="kfgPmForm" ng-submit="submitForm(kfgPmForm.$valid)" novalidate>
<!-- duplicate class attribute -->
<div class="col-sm-12" class="form-horizontal" role="form">
<!-- end tag seen too early -->
</div>
</div>
Duplicate class attribute -- the second one will be ignored
End tag seen too early - the scope of the controller will be limited
These two errors alone will cause the app to fail.
Also angular.js and bootstrap.js do not play well together. They do not co-ordinate their manipulation of the DOM.
I am new to Angularjs. I tried to create a dynamic table but the table is not generated and I noticed that the form submit also not working. Please have a look and advise me.
<script>
var app =angular.module("myApp",[]);
app.controller("myCtrl",function($scope) {
$scope.students = [{
'name' : 'ab',
'email' : 'ab#gmail.com',
'dept' : 'cse'
}];
$scope.addStudent = function(){
console.log('addStudent');
$scope.students.push( {
'name' : $scope.name,
'email' : $scope.email,
'dept' : $scope.dept
});
$scope.name = '';
$scope.email = '';
$scope.dept = '';
};
});
</script>
Here is the respective html.
<body>
<div ng-app = "myApp" controller="myCtrl">
<div class = "form-group" >
<form class = "student-form" ng-submit="addStudent()">
<div class = "row">
<label class = "col-md-6" for= "name"> Name :</label>
<input class = "col-md-6" type ="text" ng-model="name" class="validate" required>
</div>
<div class = "row">
<label class = "col-md-6" for= "email"> Email :</label>
<input class = "col-md-6" type ="email" ng-model="email" class="validate" required>
</div>
<div class = "row" >
<label for= "dept" class = "col-md-6"> Department :</label>
<input class = "col-md-6" type ="text" ng-model="dept" class="validate" required>
</div>
<div class = "row">
<!-- <button type="button" class="btn btn-success col-sm-6" ng-click= addStudent()>Add</button>
<button type="button" class="btn btn-danger col-sm-6" ng-click = reset()>Reset</button> -->
<input type="submit" value="Submit" class="btn btn-success"/>
</div>
{{name + ' ' + email +' ' + dept }}
</form>
</div>
<div class = "table-responsive">
<table class="table">
<thead >
<tr class="success">
<td> Name </td>
<td> Email</td>
<td> Department </td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in students">
<td>{{ x.name }}</td>
<td>{{ x.email }}</td>
<td>{{ x.dept }}</td>
</tr>
<tbody>
</table>
</div>
</div>
</body>
You've got a typo.
Use ng-controller instead of controller and it will work.
Directive ng-app & ng-controller code
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="helloApp">
<head>
<title>Hello AngularJS - Add Table Row Dynamically</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="assets/js/controllers.js"></script>
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">
...
</body>
</html>
Controller CompanyCtrl code in controller.js
<script>
var helloApp = angular.module("helloApp", []);
helloApp.controller("CompanyCtrl", function($scope) {
$scope.companies = [];
$scope.addRow = function(){
$scope.companies.push({ 'name':$scope.name, 'email': $scope.email, 'department':$scope.department});
$scope.name='';
$scope.email='';
$scope.department='';
};
)};
</script>
Directive ng-repeat code
<table class="table">
<tr>
<th>name
</th>
<th>email
</th>
<th> department
</th>
</tr>
<tr ng-repeat="company in companies">
<td>{ {company.name}}
</td>
<td>{ {company.email}}
</td>
<td>{ {company.department}}
</td>
</tr>
</table>
**Directive ng-submit code**
<form class="form-horizontal" role="form" ng-submit="addRow()">
<div class="form-group">
<label class="col-md-2 control-label">name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="name"
ng-model="name" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">email</label>
<div class="col-md-4">
<input type="text" class="form-control" name="email"
ng-model="email" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">department</label>
<div class="col-md-4">
<input type="text" class="form-control" name="department"
ng-model="department" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
<body>
<div ng-app = "myApp" ng-controller="myCtrl">
<div class = "form-group" >
<form ng-submit="addStudent()" class = "student-form">
<div class = "row">
<label class = "col-md-6" for= "name"> Name :</label>
<input class = "col-md-6" type ="text" ng-model="user.name" class="validate" required>
</div>
<div class = "row">
<label class = "col-md-6" for= "email"> Email :</label>
<input class = "col-md-6" type ="email" ng-model="user.email" class="validate" required>
</div>
<div class = "row" >
<label for= "dept" class = "col-md-6"> Department :</label>
<input class = "col-md-6" type ="text" ng-model="user.dept" class="validate" required>
</div>
<div class = "row">
<!-- <button type="button" class="btn btn-success col-sm-6" ng-click= addStudent()>Add</button>
<button type="button" class="btn btn-danger col-sm-6" ng-click = reset()>Reset</button> -->
<input type="submit" value="Submit" class="btn btn-success"/>
</div>
{{name + ' ' + email +' ' + dept }}
</form>
</div>
<div class = ""table-responsive">
<table class="table">
<thead >
<tr class="success">
<td> Name </td>
<td> Email</td>
<td> Department </td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in students">
<td>{{ x.name }}</td>
<td>{{ x.email }}</td>
<td>{{ x.dept }}</td>
</tr>
<tbody>
</table>
</div>
</body>
JS:
<script>
var app =angular.module("myApp",[]);
app.controller("myCtrl",function($scope) {
$scope.students = [{
'name' : 'ab',
'email' : 'ab#gmail.com',
'dept' : 'cse'
}];
$scope.user = {};
$scope.addStudent = function(){
console.log('addStudent');
$scope.students.push($scope.user);
$scope.user = {};
};
});
</script>
Easy way to do the same problem.By creating object.
I have an issue with ng-show/hide not working after a successful Firebase login. I have a loggedIn variable in $rootScope as follows:
app.run(function($rootScope){
$rootScope.loggedIn = false;
console.log("loggedIn", $rootScope.loggedIn);
});
And have injected $rootScope in my login controller like so:
app.controller("loginCtrl", ['$scope', '$rootScope', '$firebaseObject', function($scope, $rootScope, $firebaseObject){....
With that in place I have tested two login functions. The first is a dummy and doesn't actually go through the Firebase auth process but does show/hide the relevant elements in the view.
The second goes through the Firebase auth fine and even logs the $rootScope.loggedIn = true exactly the same as the first dummy function. But the show/hide doesn't work.
// This works
$scope.logIn = function(){
$rootScope.loggedIn = true;
console.log("loggedIn", $rootScope.loggedIn);
}
// This doesn't work
// logs into Firebase fine but ng-show/hide doesn't work
$scope.logIn = function(){
ref.authWithPassword({
email : $scope.user.email,
password : $scope.user.password
},
function(error, authData) {
if (error) {
console.log("Login Failed!", error);
} else {
console.log("Authenticated successfully with payload:", authData);
// NEED TO FIX!!!
$rootScope.loggedIn = true;
console.log("loggedIn", $rootScope.loggedIn);
}
});
}
Here is the ng-show/hide in the HTML
<div class="login" ng-hide="loggedIn" ng-controller="loginCtrl">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" ng-model="user.email" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" ng-model="user.password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" ng-click="logIn()">Sign in</button>
</form>
</div><!-- ./login form -->
<!-- main page container -->
<div class="container" ng-controller="myCtrl">
<div class="main-content" ng-show="loggedIn">
<h1>{{ pageTitle }}</h1>
<hr>
<div id="successNotice" class="alert alert-success" role="alert" ng-show="savedSuccess">
Musician saved successfully!
</div>
<table class="table table-striped">
<thead>
<tr>
<label>Enter the name of your favourite musician</label>
<br>
<th>
<input class="form-control" placeholder="First Name" ng-model="dev.firstName" name="firstName">
</th>
<th>
<input class="form-control" placeholder="Last Name" ng-model="dev.lastName" name="lastName">
</th>
<th>
<button class="btn btn-success pull-right" >
<span class="glyphicon glyphicon-plus" ng-click="add(dev)"></span>
</button>
</th>
</tr>
</thead>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="musician in musicians">
<td>{{ musician.firstName }}</td>
<td>{{ musician.lastName }}</td>
<td>
<button class="btn btn-danger pull-right" ng-click="remove($index)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div><!-- ./main-content -->
I know it's probably not the best or most secure way of performing this task and there should be more separation and fancy routing going on. But I just wanted to test it out as proof of concept before refactoring the business logic using better Angular practices. For the moment I'd like to know why this doesn't work. Thanks!
I think you'll need to expose $rootScope.loggedIn to your $scope because (I could be wrong) I'm pretty sure $rootScope variables aren't exposed to your HTML/template. $rootScope is available to your controller because you injected it, but only the $scope is exposed to your HTML so you need to manipulate the $scope variable.
Try adding this in your controller:
$scope.loggedIn = $rootScope.loggedIn
The $scope.loggedIn variable will be exposed to the HTML where it can be used by your ng-show and ng-hide. Here, we're just copying the value from $rootScope.loggedIn.
I'm new to angular.js and i have been having trouble getting form input value.
So i have looked for an answer all over including stackoverflow i could not find any answer.
I want to get the input values using the controller but on each attempt i try i get in the console that its undefined on just using either an object or just text
here is the javascript code:
$scope.url = '';
$scope.user = {
password : '',
repassword : ''
};
$scope.registerUser = function()
{
$log.info($scope.email);
$log.info($scope.user);
}
here is the html code:
<table class="table-responsive">
<tbody>
<form class="form-inline" action="" method="post">
<div class="form-group">
<tr>
<td><label for="email">E-mail</label></td>
<td>
<div class="input-group">
<input type="email" class="form-control" name="email" ng-model="email">
<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
</div>
</td>
</tr>
</div>
<div class="form-group">
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" class="form-control" name="password" ng-value="user.password"><td>
</tr>
</div>
<div class="form-group">
<tr>
<td><label for="Repassword">Reenter Password:</label></td>
<td><input type="password" class="form-control" name="Repassword" ng-value="user.repassword"></td>
</tr>
</div>
<tr><td><input class="btn btn-default" type="button" value="Register" ng-click="registerUser()"></td></tr>
</form>
</tbody>
</table>
You're using ng-value instead of ng-model:
<input type="password" ng-model="user.password">
<input type="password" ng-model="user.repassword">
You might also want to pass in user to your ng-click for convenience and less typing in the function:
ng-click="registerUser(user)"
$scope.registerUser = function(user) {
console.log(user);
}
I have a problem with my ng-repeat. I am working in a project and I'm designing a gradecontrol system. I have a form that when the user clicks in the button, it adds the $scope.grade to an array.
In the table below, it was supposed to show the array. But it isn't showing.
<div class="container">
<h2>Controle de Notas:</h2>
<form role="form">
<div class="form-group">
<label for="inputNameSubject"> Subject's Name</label>
<input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
<p>{{grade.name}}</p>
</div>
<div class="form-group">
<label for="inputTeacherSubject"> Teacher's Name</label>
<input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher"/>
</div>
<div class="form-group">
<label for="inputScoreSubject"> Grade </label>
<input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade"/>
</div>
<button type="button" class="btn btn-primary" ng-click="pushToArray() "> Submit your score!</button>
</form>
</div>
<br><br><br>
<div class="container">
<table class="table">
<th ng-repeat="head in tableHeadings"> {{head}}</th>
<tr ng-repeat="gr in grades track by $index" ></tr>
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
</table>
</div>
angular.module('myProjectApp')
.controller('MainCtrl', function($scope) {
$scope.grade = {};
$scope.grades = [];
$scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];
$scope.pushToArray = function(){
$scope.grades.push($scope.grade);
console.log($scope.grades);
}
});
Because you close off your tr element so your td elements are not considered in the same scope as your ng-repeat and do not get printed correctly. Not to mention it is also not valid html.
<tr ng-repeat="gr in grades track by $index" ></tr>
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
should be
<tr ng-repeat="gr in grades track by $index" >
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
</tr>
Patrick beat me to it!
angular.module('myProjectApp', [])
.controller('MainCtrl', function($scope) {
$scope.grade = {};
$scope.grades = [];
$scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];
$scope.pushToArray = function() {
$scope.grades.push($scope.grade);
console.log(JSON.stringify($scope.grades));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myProjectApp" ng-controller="MainCtrl">
<div class="container">
<h2>Controle de Notas:</h2>
<form role="form">
<div class="form-group">
<label for="inputNameSubject">Subject's Name</label>
<input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
<p>{{grade.name}}</p>
</div>
<div class="form-group">
<label for="inputTeacherSubject">Teacher's Name</label>
<input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher" />
</div>
<div class="form-group">
<label for="inputScoreSubject">Grade</label>
<input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade" />
</div>
<button type="button" class="btn btn-primary" ng-click="pushToArray() ">Submit your score!</button>
</form>
</div>
<br>
<br>
<br>
<div class="container">
<table class="table">
<th ng-repeat="head in tableHeadings">{{head}}</th>
<tr ng-repeat="gr in grades">
<td>{{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td>{{gr.score}}</td>
</tr>
</table>
</div>
</body>