<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="angular/lib/angular.min.js"></script>
<script type="text/javascript" src="js/controller/studentinfo.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>
<span class="black-text">School Management Site</span>
</h1>
</div><!--header end-->
<div id="topmenu">
<ul>
<li>
HOME
</li>
<li>
STUDENTS
</li>
<li>
CLASS INFORMARION
</li>
<li>
LOGOUT
</li>
</ul>
</div><!--topmenu end-->
<div id="content">
<div class="jumbotron">
<div ng-controller="studentInfoController" ng-init="getStudentsInfo()">
<form name="studentform" ng-submit="submitStudentForm(studentform.$valid)" novalidate>
<div class="form-group">
<h3>Student Form:</h3>
<h4 style="color: red;">{{errorModel.errorMessage}}</h4>
<label for="rollno" style="color: blue;">StudentRollNo:</label>
<div class="col-sm-12">
<div class="col-sm-3">
<input type="text" class="form-control" id="rollno"
name="studentRollNo" ng-model="student.studentRollNo" required
placeholder="RollNo">
</div>
<div class="col-sm-9">
<span style="color: red"
ng-show="studentform.studentRollNo.$error.required && submitted">
StudentRollNo is required.</span>
</div>
</div>
</div>
<div class="form-group">
<label for="name" style="color: blue;">StudentName:</label>
<div class="col-sm-12">
<div class="col-sm-3">
<input type="text" class="form-control" id="studentName"
name="studentName" ng-model="student.studentName" required
placeholder="StudentName">
</div>
<div class="col-sm-9">
<span style="color: red"
ng-show="studentform.studentName.$error.required && submitted">
StudentName is required.</span>
</div>
</div>
</div>
<div class="form-group">
<label for="name" style="color: blue;">Address:</label>
<div class="form-group">
<div class="col-sm-12">
<div class="col-sm-3">
<input type="text" class="form-control" id="village"
name="village" ng-model="student.village"
placeholder="Village" >
</div>
</div>
</div>
<br/>
<br/>
<div class="col-sm-12">
<div class="col-sm-3">
<input type="text" class="form-control" id="districtName"
name="districtName" ng-model="student.districtName"
placeholder="DistrictName" >
</div>
<div class="col-sm-9">
<span style="color: red"
ng-show="studentform.districtName.$error.required && submitted">
DistrictName is required. </span>
</div>
</div>
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-sm-12">
<div class="col-sm-3">
<input type="text" class="form-control" id="state"
name="state" ng-model="student.state" required
placeholder="State">
</div>
<div class="col-sm-9">
<span style="color: red"
ng-show="studentform.state.$error.required && submitted">
StateName is required.</span>
</div>
</div>
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Total Number of Student:<label style="color: black">{{studentsData.length}}</label>
<table id="stuId" border="1" style="color: blue;">
<tr>
<th>StudentRollNo</th>
<th>StudentName</th>
<th>DELETE</th>
<td></td>
</tr>
<tr ng-repeat="student in studentsData" style="color: black;">
<td>
{{student.studentRollNo}}
</td>
<td>
{{student.studentName}}
</td>
<td>
<input type="button" name="info" value="DeleteStudent" ng-click = "deleteStudent({{student.addresId}})">
</td>
</tr>
</table>
</div>
</div>
</div><!--content endss-->
</div><!--container end-->
</body>
when we are loading this page we are getting error
my error is
Error: [$parse:syntax] http://errors.angularjs.org/1.3.15/$parse/syntax?p0=%7B&p1=invalid%20key&p2=16&p3=deleteStudent(%7B%7Bstudent.addresId%7D%7D)&p4=%7Bstudent.addresId%7D%7D)
at ib.equality (http://localhost:8080/SchoolSystem/angular/lib/angular.min.js:196:291)
how can reslove this error
Related
This is the form.
<div class="row" ng-controller="contactsCtrl">
<form ng-show="addFormShow">
<h3>Add Contact</h3>
<!-- Add form -->
<div class="row">
<div class="large-6 columns">
<label>Name:
<input type="text" ng-model="name" placeholder="Contact Name" required />
</label>
</div>
<div class="large-6 columns">
<label>Email:
<input type="text" ng-model="email" placeholder="Contact Email" required />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Company:
<input type="text" ng-model="company" placeholder="Company Name" required />
</label>
</div>
<div class="large-6 columns">
<label>Work Phone:
<input type="text" ng-model="work_phone" placeholder="Work Phone" required />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Mobile Phone:
<input type="text" ng-model="mobile_phone" placeholder="Mobile Phone" required />
</label>
</div>
<div class="large-6 columns">
<label>Home Phone:
<input type="text" ng-model="home_phone" placeholder="Home Phone" required />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Street Address:
<input type="text" ng-model="street_address" placeholder="Street Address" required />
</label>
</div>
<div class="large-6 columns">
<label>City:
<input type="text" ng-model="city" placeholder="City" required />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>State:
<input type="text" ng-model="state" placeholder="State" required />
</label>
</div>
<div class="large-6 columns">
<label>Zip Code:
<input type="text" ng-model="zipcode" placeholder="Zip Code" required />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="submit" value="Add Contact" class="button" />
</div>
</div>
</form>
<div class="large-10 columns">
<h3>Your Contacts (3)</h3>
<table>
<thead>
<tr>
<th width="200px">Name</th>
<th width="200px">Company</th>
<th width="25%">Email</th>
<th width="25%">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{contact.name}}</td>
<td>{{contact.company}}</td>
<td>{{contact.email}}</td>
<td><a class="button tiny" ng-click="showEditForm(contact)">Edit</a>
<a class="button tiny alert" ng-click="removeContact(contact)">Delete</a></td>
</tr>
</tbody>
</table>
</div>
<div class="small-12 large-2 columns">
<a class="button large" ng-click="showAddForm()">+</a>
</div>
</div>
This is the controller.
'use strict';
angular.module('myContacts.contacts', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/contacts', {
templateUrl: 'contacts/contacts.html',
controller: 'contactsCtrl'
});
}])
.controller('contactsCtrl', ['$scope', '$firebaseArray', function($scope,$firebaseArray) {
var ref = new Firebase('https://mycontacts-1bb2d.firebaseio.com/contacts');
$scope.contacts = $firebaseArray(ref);
$scope.showAddForm = function(){
$scope.addFormShow = true;
}
}]);
This is pretty simple code. Its supposed to show the form when the user clicks on the '+' button. But I cant figure out why the ng-show directive is not working.
It works fine with your code, check if you have properly added ng-controller in your code.
DEMO
var myApp = angular.module('ReqWebApp', [])
myApp.controller('contactsCtrl', function contactsCtrl($scope) {
$scope.showAddForm = function(){
$scope.addFormShow = true;
}
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="contactsCtrl">
<form ng-show="addFormShow">
<h3>Add Contact</h3>
<!-- Add form -->
<div class="row">
<div class="large-6 columns">
<label>Name:
<input type="text" ng-model="name" placeholder="Contact Name" required />
</label>
</div>
<div class="large-6 columns">
<label>Email:
<input type="text" ng-model="email" placeholder="Contact Email" required />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="submit" value="Add Contact" class="button" />
</div>
</div>
</form>
<div class="small-12 large-2 columns">
<a class="button large" ng-click="showAddForm()">+</a>
</div>
</body>
</html>
The code works fine for me. I think you might have done some small error in adding controller. Refer the code below
<html ng-app='FormApp'>
<head>
</head>
<body ng-controller='contactsCtrl'>
<form ng-show="addFormShow">
<h3>Add Contact</h3>
<!-- Add form -->
<div class="row">
<div class="large-6 columns">
<label>Name:
<input type="text" ng-model="name" placeholder="Contact Name" required />
</label>
</div>
<div class="large-6 columns">
<label>Email:
<input type="text" ng-model="email" placeholder="Contact Email" required />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="submit" value="Add Contact" class="button" />
</div>
</div>
</form>
<div class="small-12 large-2 columns">
<a class="button large" ng-click="showAddForm()">+</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<script>
angular.module('FormApp', []).controller('contactsCtrl', ['$scope', function($scope) {
$scope.showAddForm = function() {
$scope.addFormShow = true;
}
}]);
</script>
</body>
</html>
i want that no body can save form without providing a name and here is my Html code ..what i am doing wrong i dont know ..i have checked many solutions please give me a reason...i want to know that how i will provide front-end validation
<div class="vbox wrapper" ng-controller="CalendarAddController">
<form id ="frmType" name="frmType" class="form-horizontal form-validation" novalidate method="get">
<div class="wrapper-v b-b col-lg-8 col-md-9 col-sm-10 col-xs-12" style="padding-bottom:5px;">
<div class="btn-toolbar pull-right ">
<a ui-sref="admin.calendar.entity" class="btn btn-xs btn-default">
Cancel
</a>
<a class="btn btn-xs btn-primary " ng-click="frmType.$valid && save()">Save</a>
</div>
<div class="h4 text-black">Add Calendar</div>
</div>
<h1> </h1>
<div class="wrapper-v col-lg-8 col-md-9 col-sm-10 col-xs-12" style="padding-bottom:5px;">
<div class="btn-toolbar pull-right">
</div>
<h4 class="wrapper text-muted">Calendar</h4>
</div>
<div class="wrapper-md" style="clear:both;">
<div class="form-group">
<label class="col-sm-2 control-label ">Name</label>
<div class="col-sm-8 col-lg-6">
<input type="text" name="name" ng-model="calendar.name"
placeholder="Enter calendar name" ng-minlength="1" ng-maxlength="15" class="form-control" ng-required="true" >
<span class="error code">{{errMsg}}</span>
<p class="help-block error-pattern">
Must start with a letter, may contain alphabets, digits and underscore.
</p>
<p class="error error-minlength">
Must be at least 1 character long.
</p>
<p class="error error-maxlength">
Length of "Name" field must not exceed 15 characters.
</p>
<span ng-show="frmType.name.$error.required && frmType.$submitted">Please provide role name</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-8 col-lg-6">
<input type="text" placeholder="Enter description" ng-maxlength="100"
ng-model="calendar.description" class="form-control" />
<p class="error error-maxlength">
Must not exceed 100 characters.
</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label ">Starting Day of Week</label>
<div class="col-sm-1 col-lg-1 dd-width">
<select name="startingDay" class="form-control" ng-model="calendar.weekStartDay">
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Working days & Timings</label>
<div class="col-md-8 col-lg-6">
<h4 class="row text-bold">
<span class="col-md-12">
<span class="col-md-3">
Working Days
</span>
<span class="col-md-6 ">
Timing
</span>
</span>
</h4>
<div class="row text-bold" ng-repeat="calDay in calDays" >
<div class="col-md-12">
<div class="col-md-3">
<div class="checkbox">
<label class="i-checks i-checks-xs ">
<input type="checkbox" checklist-model="calendar.workingDays" ng-model="calDay.enabled"
checklist-value="calDay.dayNum" ng-change="selectDay(calDay.dayNum)" ><i></i>{{calDay.dayName}}
</label>
</div>
</div>
<div class="col-md-6">
{{timingDay=corrTimingDay(calDay.dayNum);""}}
<div class="row" >
<button class="btn btn-link" ng-disabled="!calDay.enabled" ng-click="open(timingDay)"
style="margin-bottom:-12px;">Add time block</button>
<span class="tooltipText"></span>
</div>
<div class="timing-chips" ng-repeat="timingBlock in timingDay.timingBlocks">
<span>{{intval(timingBlock.startTime/60)}}:{{makestr(timingBlock.startTime%60)}}
{{ampm(timingBlock.startTime)}} to
{{intval(timingBlock.endTime/60)}}:
{{makestr(timingBlock.endTime%60)}} {{ampm(timingBlock.endTime)}}</span>
<span class="hour">[{{totalTime(timingBlock.startTime,timingBlock.endTime)}} Hour]</span>
<i class="remove fa fa-remove no-padder" ng-click="timingDay.timingBlocks
.splice(timingDay.timingBlocks.indexOf(timingBlock),1)">
</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper-md " style="clear:both;">
<div class="wrapper-v col-lg-8 col-md-9 col-sm-10 col-xs-12 " style="padding-bottom:5px;">
<h4 class="wrapper text-muted cls-space ">Holidays
<span class="btn-toolbar pull-right">
<a class="btn btn-xs btn-primary " ng-click="holidayOpen('lg')">Apply Holidays
</a> <input id="filter" type="text" ng-model="filterValue"
ng-change="filterTable()" placeholder="search"
class="form-control toolbar-item input-group w-xs inline m-l-xs" />
</span>
</h4>
</div>
<div class="col-lg-8 col-md-9 col-sm-10 col-xs-12 " style="padding-bottom:5px;">
<div class="wrapper-v-md" style="clear: both;">
<table datatable="ng" dt-options="dtOptionsHoliday" class="table table-striped clickable b-a table-condensed" >
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="holiday in calendarHolidays">
<td>{{holiday.name}}</td>
<td>{{holiday.description}}</td>
<td>{{holiday.date}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="wrapper-v col-lg-8 col-md-9 col-sm-10 col-xs-12 " style="padding-bottom:5px;">
<h4 class="wrapper text-muted cls-space">Exceptions
<span class="btn-toolbar pull-right">
<a class="btn btn-xs btn-primary " ng-click="exceptionOpen('lg')">Apply Exceptions
</a> <input id="filter" type="text" ng-model="filterValue"
ng-change="filterTable()" placeholder="search"
class="form-control toolbar-item input-group w-xs inline m-l-xs" />
</span>
</h4>
</div>
<div class="col-lg-8 col-md-9 col-sm-10 col-xs-12 " style="padding-bottom:5px;">
<div class="wrapper-v-md table-space" style="clear: both;">
<table datatable="ng" dt-options="dtOptionsException" class="table table-striped clickable b-a table-condensed" >
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="exception in calendarExceptions">
<td>{{exception.name}}</td>
<td>{{exception.description}}</td>
<td>{{exception.date}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></form>
<!-- <pre>{{calendar |json}}</pre> -->
</div>
Can you just use required and see if it helps?
<input type="text" name="name" required>
Just adding onto #thepio's answer while you do that
<input type="text" name="name" ng-model="calendar.name"
placeholder="Enter calendar name" required >
<input type="submit" ng-disabled="!frmType.$valid">
The last line will disable your submit button until user types something in it.
If you want to check for if all letters were words I suggest using ng-pattern.
An example of what I used in my code
<div class="form-group">
<label class="control-label">Executive Name</label>
<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Executive Name" name="execName" ng-model="user.execName" ng-pattern="/^[A-z ]*$/" required />
<span class="error" ng-show="createForm.execName.$error.required && createForm.execName.$touched">required</span>
<span class="error" ng-show="createForm.execName.$error.pattern && createForm.execName.$dirty">Must start with a letter, and contain letters only.</span>
</div>
you can use ng-message validation like:
<form name="form" validate>
<input id="name" name="name" md-maxlength="25"
ng-model="name" required autocomplete="false">
<div ng-messages="form.name.$error">
<div ng-message="required">Name field can not empty</div>
</div>
</form>
here if the full document about this.
I am developing Spring MVC AngularJS example. I've simply taken a code from link: https://github.com/sivaprasadreddy/sivalabs-blog-samples-code/tree/master/springmvc-angular-crud. I am able to login using siva#gmail.com/siva successfully, but when I'm accessing logout, user profile, setting etc, nothing is happening. Please guide what is missing here.
login.jsp:
<!DOCTYPE html>
<%#include file="taglib.jsp" %>
<html>
<head>
<title>Login</title>
<base href="${rootUrl}">
<%# include file="assets.jspf" %>
</head>
<body>
<div class="col-md-6 col-md-offset-2">
<c:if test="${param.error != null}">
<div class="alert alert-danger">
Invalid UserName and Password.
</div>
</c:if>
<c:if test="${param.logout != null}">
<div class="alert alert-success">
You have been logged out.
</div>
</c:if>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-2">
<h2>User Login Form</h2>
<form:form id="loginForm" method="post" action="login" modelAttribute="user"
class="form-horizontal" role="form" cssStyle="width: 800px; margin: 0 auto;">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">UserName*</label>
<div class="col-sm-4">
<input type="text" id="username" name="username" class="form-control" placeholder="UserName" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password*</label>
<div class="col-sm-4">
<input type="password" id="password" name="password" class="form-control" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<input type="submit" class="btn btn-primary" value="Login">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
New User? Register
</div>
</div>
</form:form>
</div>
</div>
</body>
</html>
register.jsp
<!DOCTYPE html>
<%#include file="taglib.jsp"%>
<html>
<head>
<title>Create User</title>
<script type="text/javascript">
$(document).ready(function() {
$("#registrationForm").submit(function( event ) {
var userName = $.trim($("#userName").val());
var password = $.trim($("#password").val());
var firstName = $.trim($("#firstName").val());
var email = $.trim($("#email").val());
if(userName == '' || password == '' || firstName == '' || email == ''){
alert("Please enter all mandatory fields");
event.preventDefault();
return false;
}
});
});
</script>
</head>
<body>
<div class="col-md-6 col-md-offset-2">
<c:if test="${ERROR != null }">
<div class="alert alert-danger">
<p>${ERROR}
</div>
</c:if>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-2">
<h2>User Registration Form</h2>
<form:form id="registrationForm" method="post" action="register"
modelAttribute="user" cssStyle="width: 800px; margin: 0 auto;"
class="form-horizontal" role="form">
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">UserName*</label>
<div class="col-sm-4">
<input type="text" id="userName" name="userName"
class="form-control" placeholder="UserName" />
<form:errors path="userName" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password*</label>
<div class="col-sm-4">
<input type="password" id="password" name="password"
class="form-control" placeholder="Password" />
<form:errors path="password" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email*</label>
<div class="col-sm-4">
<input type="text" id="email" name="email" class="form-control"
placeholder="Email" />
<form:errors path="email" />
</div>
</div>
<div class="form-group">
<label for="firstName" class="col-sm-2 control-label">FirstName*</label>
<div class="col-sm-4">
<input type="text" id="firstName" name="firstName"
class="form-control" placeholder="FirstName" />
<form:errors path="firstName" />
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-sm-2 control-label">LastName</label>
<div class="col-sm-4">
<input type="text" id="lastName" name="lastName"
class="form-control" placeholder="LastName" />
<form:errors path="lastName" />
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-2 control-label">Date Of
Birth</label>
<div class="col-sm-4">
<input type="text" id="dob" name="dob" class="form-control"
placeholder="dd-MM-yyyy" />
<form:errors path="dob" cssClass="text-danger" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<input type="submit" class="btn btn-primary" value="Register">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
Already Registered? Login
</div>
</div>
</form:form>
</div>
</div>
</body>
</html>
welcome.jsp:
<!DOCTYPE html>
<%# include file="taglib.jsp" %>
<html lang="en" ng-app="usersApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spring MVC Angular Tutorials : Forum</title>
<%# include file="assets.jspf"%>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="${rootUrl}home">My DashBoard</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#"> My Account </a>
<ul class="dropdown-menu dropdown-user">
<li><a href="${rootUrl}myAccount"><i
class="fa fa-user fa-fw"></i> User Profile</a></li>
<li><a href="${rootUrl}changePwd"><i
class="fa fa-gear fa-fw"></i> Settings</a></li>
<li class="divider"></li>
<li>Logout</li>
</ul> <!-- /.dropdown-user --></li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 sidebar">
<div class="list-group">
<span class="list-group-item active">Personal Data</span> PhoneBook Events <span
class="list-group-item active">Settings</span> <a href="#"
class="list-group-item">Configuration</a>
</div>
</div>
<div class="col-md-9 " ng-controller="UserCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th width="20px;">Id</th>
<th width="100px;">FirstName</th>
<th width="100px;">LastName</th>
<th width="150px;">Email</th>
<th width="100px;">Edit / Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in userList">
<td>{{user.id}}</td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.email}}</td>
<td><span style="cursor: pointer;"
class="glyphicon glyphicon-pencil"
ng-click="handleEditUser(user)"></span> <span
style="cursor: pointer;" class="glyphicon glyphicon-trash"
ng-click="handleDeleteUser(user)"></span></td>
</tr>
</tbody>
</table>
<div class="panel panel-default">
<div class="panel-heading">Edit User</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputId" class="col-sm-2 control-label">Id</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputId"
placeholder="Id" ng-model="editUser.id">
</div>
</div>
<div class="form-group">
<label for="inputFirstName" class="col-sm-2 control-label">FirstName</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputFirstName"
placeholder="FirstName" ng-model="editUser.firstName">
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="col-sm-2 control-label">LastName</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputLastName"
placeholder="LastName" ng-model="editUser.lastName">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail"
placeholder="Email" ng-model="editUser.email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default"
ng-click="handleUpdateUser(editUser)">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ContactController.java
#RestController
#RequestMapping("/users/{userId}/contacts/")
public class ContactController{
#Autowired
private UserService userService;
#RequestMapping(value="", method=RequestMethod.GET)
public List<Contact> findAll(#PathVariable("userId") int userId) {
return userService.findUserContacts(userId);
}
#RequestMapping(value="/{contactId}", method=RequestMethod.GET)
public Contact findContact(#PathVariable("userId") int userId, #PathVariable("contactId") int contactId) {
return userService.findUserContact(userId, contactId);
}
#RequestMapping(value="", method=RequestMethod.POST)
public Contact createContact(#PathVariable("userId") int userId, Contact contact) {
return userService.saveUserContact(contact);
}
#RequestMapping(value="", method=RequestMethod.PUT)
public Contact updateContact(#PathVariable("userId") int userId, Contact contact) {
return userService.saveUserContact(contact);
}
#RequestMapping(value="/{contactId}", method=RequestMethod.DELETE)
public void deleteContact(#PathVariable("userId") int userId, #PathVariable("contactId") int contactId) {
userService.deleteUserContact(userId, contactId);
}
}
UserController.java
#Controller
public class UserController {
#Autowired
private UserService userService;
#RequestMapping(value = "login", method = RequestMethod.GET)
public String loginForm(Model model){
model.addAttribute("user", new User());
return "login";
}
#RequestMapping(value = "/register", method = RequestMethod.GET)
public String registrationForm(Model model){
model.addAttribute("user", new User());
return "register";
}
#RequestMapping(value = "/register", method = RequestMethod.POST)
public String handleRegistration(#ModelAttribute("user") User user, BindingResult errors, Model model){
if (errors.hasErrors()) {
return "register";
}
try {
userService.createUser(user);
return "redirect:login";
} catch (Exception e) {
e.printStackTrace();
model.addAttribute("ERROR", e.getMessage());
return "register";
}
}
}
assets.jspf
<script type="text/javascript" src="${rootUrl}resources/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="${rootUrl}resources/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${rootUrl}resources/bootstrap/css/bootstrap-theme.min.css"/>
<script type="text/javascript" src="${rootUrl}resources/bootstrap/js/bootstrap.min.js"></script>
<script src="resources/angularjs/angular.js"></script>
<script src="resources/angularjs/angular-resource.js"></script>
<script src="${rootUrl}resources/js/controllers.js"></script>
<script src="${rootUrl}resources/js/services.js"></script>
<link rel="stylesheet" href="${rootUrl}resources/css/styles.css"/>
<script type="text/javascript" src="${rootUrl}resources/js/app.js"></script>
taglib.jsp:
<%#taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%# taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%# taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<c:url var="rootUrl" value="/"/>
Please let me know if You need any info.
Screen shots of UI:
If I call any tab it gives nothing why?
not seeing any handelar for /logout. Create a controller method to handle this request
#RequestMapping(value = "/logout", method = RequestMethod.GET/POST)
public String registrationForm(Model model){
//your logic
return "register";
//or return "redirect:/login"
}
I am Fairly New to AngularJs, I have done crud operations in AngularJs, I have fetched all the records of user having options like(View, Edit(Update), Delete)
If the User Wants To Update the record then he clicked on edit then shows his/her record. all fields are mandatory. if users deletes the text in the Text-box. then press on cancel button it redirects to mange users page with empty field
Like in my plunker, I want to update one record, Clicked on Edit and then in the name(textbox) make it as blank. Immediately click on Cancel
Then Output will be empty of my record(name field)
But, I want data in user record(name field), if user make it as blank
I was Updated My code in here
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link href="style.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<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="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="container" style="padding-top:20px;">
<div ng-app="userApp" data-ng-controller="userController" class="container">
<div ng-show="error" class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<p>{{ error }}</p>
</div>
<div class="modal fade" id="userModel" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title" id="myModalLabel" ng-hide="editMode">Add User</h4>
<h4 class="modal-title" id="myModalLabel" ng-show="editMode">Edit User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" name="adduserform">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.name" name="name" class="form-control" id="title" placeholder="Your Name" required title="Enter your name" />
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.address" name="address" class="form-control" id="title" placeholder="Your Address" required title="Enter your address" />
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">ContactNo</label>
<div class="col-sm-10">
<input type="text" data-ng-model="user.contact" name="contact" class="form-control" id="title" placeholder="Your ContactNo" required title="Enter your contactno" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<span data-ng-hide="editMode">
<input type="submit" value="Add" ng-disabled="adduserform.$invalid" data-ng-click="add()" class="btn btn-primary" />
</span>
<span data-ng-show="editMode">
<!-- <input type="submit" value="Update" ng-disabled="" data-ng-click="update()" class="btn btn-primary"/> -->
<input type="submit" disabled="disabled" value="update" class="btn btn-primary"/>
</span>
<input type="button" value="Cancel" data-ng-click="cancel()" class="btn btn-primary" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<h1>Users List</h1>
<table class="table table-hover">
<tr>
<th>User ID</th>
<td>Name</td>
<th>Address</th>
<th>Contact No</th>
<th></th>
</tr>
<tr data-ng-repeat="user in users">
<td><strong>{{ user.id }}</strong></td>
<td>
<p>{{ user.name }}</p>
</td>
<td>
<p>{{ user.address }}</p>
</td>
<td>
<p>{{ user.contact }}</p>
</td>
<td>
<p>
<a data-ng-click="get(user)" href="javascript:;">View</a> |
<a data-ng-click="edit(user)" href="javascript:;">Edit</a> |
<a data-ng-click="showconfirm(user)" href="javascript:;">Delete</a>
</p>
</td>
</tr>
</table>
<hr />
<div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title" id="myModalLabel">View User</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" name="viewuser">
<div class="form-group">
<label for="Name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
{{user.name}}
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
{{user.address}}
</div>
</div>
<div class="form-group">
<label for="ContactNo" class="col-sm-2 control-label">ContactNo</label>
<div class="col-sm-10">
{{user.contact}}
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title" id="myModalLabel">Confirm Action</h4>
</div>
<div class="modal-body">
Are you sure to delete?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-ng-click="delete()">Ok</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
please help me out with this situation
You are binding your modal to the original user object.
Instead you can make a temporary copy of the user, and if you click cancel, copy the temp back to the original user:
$scope.edit = function () {
$scope.user = this.user;
$scope.tempUser = angular.copy($scope.user); //copy user to temp
$scope.editMode = true;
$('#userModel').modal('show');
};
$scope.cancel = function () {
angular.copy($scope.tempUser, $scope.user); // copy back from temp to user
$('#userModel').modal('hide');
}
See this plunker
I am using backbone to populate the table and then be able to edit the contents using modals implemented in bootstrap.
The table populates very well but on clicking edit on the modal, all field contain data of the first entry only
Here is the code,
<tbody>
<% users.each(function(user){ %>
<tr>
<td>
<%= user.get("first_name") %>
</td>
<td><%= user.get("last_name") %></td>
<td><%= user.get("gender") %></td>
<td >
24 years
</td>
<td >
<%= user.get("email") %>
</td>
<td class="hidden-480">
<%= user.get("phone_number")%>
</td>
<td class="hidden-480">
<%= user.get("role") %>
</td>
<td>
<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
<a href="#modal-form" role="button" class="blue" data-toggle="modal">
<i class="icon-pencil bigger-130" id="user_edit" ></i>
</a>
<a class="red" href="#">
<i class="icon-trash bigger-130" id="user_delete" ></i>
</a>
</div>
</td>
</tr>
<div id="modal-form" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="blue bigger">Edit User</h4>
</div>
<div class="modal-body overflow-visible">
<div class="row">
<div class="col-xs-12">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> First Name </label>
<div class="col-sm-9">
<input type="text" id="user_first_name" value=<%= user.get("first_name")%> class="col-xs-10 col-sm-10" />
</div>
</div><br>
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Last Name </label>
<div class="col-sm-9">
<input type="text" id="user_last_name" value=<%= user.get("last_name")%> class="col-xs-10 col-sm-10" />
</div>
</div> <br>
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Date of Birth </label>
<div class="col-sm-9">
<input type="text" id="user_date_of_birth" value=<%= user.get("date_of_birth")%> class="col-xs-10 col-sm-10" />
</div>
</div><br>
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Gender </label>
<div class="col-sm-9">
<select id="user_gender" class="col-xs-10 col-sm-10 ">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div><br>
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Phone Number </label>
<div class="col-sm-9">
<input type="text" id="user_phone_number" value=<%= user.get("phone_number")%> class="col-xs-10 col-sm-10" />
</div>
</div><br>
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> E-mail Address </label>
<div class="col-sm-9">
<input type="text" id="user_email" value=<%= user.get("email")%> class="col-xs-10 col-sm-10" />
</div>
</div><br>
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-2">
Password
</label>
<div class="col-sm-9">
<input id="user_password" class="col-xs-10 col-sm-10" type="password">
</div>
</div><br>
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="form-field-2">
Confirm Password
</label>
<div class="col-sm-9">
<input id="password_confirmation" class="col-xs-10 col-sm-10" type="password">
</div>
</div> <br>
<div class="clearfix form-actions">
<div class="col-md-offset-3 col-md-9">
<button class="btn btn-info" type="button" id="user_submit">
<i class="icon-ok bigger-110"></i>
Submit
</button>
<button class="btn" type="reset">
<i class="icon-undo bigger-110"></i>
Reset
</button>
</div>
</div>
<div class="hr hr-24"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<% }); %>
</tbody>
In your loop you are assigning an ID to the modal and this is giving them all the same IDs. Maybe the bootstrap JS is only showing the first one that it finds which is why you see the same one every time. Maybe you if you appended the ID of the user or something unique to the ID of the modal this would work.
For Example:
<div id="modal-form" class="modal" tabindex="-1">
and
<a href="#modal-form" role="button" class="blue" data-toggle="modal">
could be changed to:
<div id="modal-form-<%= user.get('id') %>" class="modal" tabindex="-1">
and
<a href="#modal-form-<%= user.get('id') %>" role="button" class="blue" data-toggle="modal">