I am new to AngularJS and working on a small project. I want to build an editable table for courses including course Id and course Name. Users are able to click edit button and then they can edit content.
Howwever,I met a problem that when user clicks edit button, all the content just gone, like delete, but I want to keep the content editable. I try ng-value, but didn't work.
Here is my code and codepen link: http://codepen.io/marong125/pen/JRBQdo
Thank you so much!
<html>
<head>
<title>Online Learning</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script>
var app = angular.module('app', []);
app.controller('courseController', function ($scope) {
$scope.courses = [
{
courseID: "CS602",
courseName: "Web Development",
isEditing:false
},
{
courseID: "CS502",
courseName: "Foundation of Java",
isEditing:false
}
];
$scope.addCourse = ()=>{
$scope.courses.push({
courseID: $scope.createIdInput,
courseName: $scope.createCourseInput
});
$scope.createIdInput = '';
$scope.createCourseInput = '';
console.log(1);
}
$scope.onEditClick = (course)=>{
course.isEditing = true;
}
});
</script>
</head>
<body ng-app="app">
<<h1>Course Manager</h1>
<div ng-controller = "courseController">
<form name="courseForm">
<input id="c_id_input" placeholder="Add course ID" ng-model="createIdInput" />
<input id= "c_name_input" placeholder="Add course name" ng-model="createCourseInput" />
<button class="btn btn-success pull-right" ng-click="addCourse()">Add Course</button>
</form>
<table class="table table-striped table-bordered table-condensed table-hover">
<tr>
<th>Course ID</th>
<th>Course Name</th>
<th>Actions</th>
</tr>
<tr ng-repeat = "course in courses">
<td>
<span ng-if="!course.isEditing" >{{course.courseID}}</span>
<form ng-submit="updateTask(course)">
<input type="text" ng-if="course.isEditing" class="form-control"
ng-value="course.courseID" ng-model="updatedCourseId" />
</form>
</td>
<td>
<span ng-if="!course.isEditing">{{course.courseName}}</span>
<form >
<input ng-if="course.isEditing" class="form-control"
ng-value="course.courseName" ng-model="updatedCourseName" />
</form>
</td>
<td>
<button class="btn btn-info" ng-click="onEditClick(course)" >Edit</button>
<button class="btn btn-danger">Delete</button>
</td>
</tr>
</table>
</div>
</body>
</html>
This is happening because of your ng-model in the edit fields. If you look closely you will find that ng-model for your ID field in updatedCourseId and Name is updatedCourseName. However your actual values are stored in course.courseID and course.courseName. Change your ng-model and point to the correct variables.
<input type="text" ng-if="course.isEditing" class="form-control"
ng-value="course.courseID" ng-model="updatedCourseId" />
<input ng-if="course.isEditing" class="form-control"
ng-value="course.courseName" ng-model="updatedCourseName" />
Alternatively
If you don't want to mix up the updated value and the non-updated value you can do that by copying the current value to another field when the user clicks on edit. I have created a codepen to demonstrate this, you can see it here.
JavaScript (Controller)
$scope.onEditClick = (course) => {
course.isEditing = true;
course.updatedCourseId = course.courseID;
course.updatedCourseName = course.courseName;
}
HTML
<input type="text" ng-if="course.isEditing" class="form-control"
ng-model="course.updatedCourseId" />
<input ng-if="course.isEditing" class="form-control"
ng-model="course.updatedCourseName" />
I think you are misunderstanding how ng-model works. ng-model represents the variable that your data is saved in, and it's a two way binding. You don't need a separate variable to store the "updated" values.
Instead of:
<input type="text" ng-if="course.isEditing" class="form-control"
ng-value="course.courseID" ng-model="updatedCourseId" />
you should use:
<input type="text" ng-if="course.isEditing" class="form-control"
ng-model="course.courseID" />
The changes will automatically be reflected, in real time, back to the array.
Related
I have an HTML where I have a table that will fill with books info that can be added with a form.
I also have a js file where I'm using jQuery (just for practice) and I have created a Book constructor for every book object that is created. Every book is stored in an array (library) and each element will be a row in the HTML table. The problem is whenever I try to append my table with a new book object after submitting the form I see the new row for 1 second and then not displaying. Probably its a DOM loading problem, but I can't find a way.
Here is my HTML and JavaScript:
let library=[];
let book;
function Book(title,author,number_of_pages,read){
this.title=title;
this.author=author;
this.number_of_pages=number_of_pages;
this.read=read;
}
function addBook(title,author,number_of_pages,read){
let book=new Book(title,author,number_of_pages,read);
library.push(book);
}
addBook("Hobbit1","Tolkien",130,"read");
$(document).ready(function(){
//Show form to add a new Book
$("#newBook").on("click",function(){
$("form").slideDown(500);
})
$("#addBook").on("submit",function(){
let title=$("#title").val();
let author=$("#author").val();
let number_of_pages=$("#number_of_pages").val();
let read=$("#read").val();
addBook(title,author,number_of_pages,read);
})
//Remove rows
$(document).on("click", "#delete", function(){
$(this).closest('tr').remove();
library.splice(library.findIndex(x=>x.title==$(this).attr('class')),1);
});
function showLibrary()
{
library.forEach(function (item,index){
$("#books tbody").append("<tr> <td>"+item.title+"</td> <td> "+item.author+"<td> "+item.number_of_pages+"</td> <td> "+item.read+"</td> <td> <button id=delete class="+item.title+">Delete</button> </td> </tr>");
})
}
showLibrary();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Whatever</title>
</head>
<body>
<h2>Books</h2>
<div id="books">
<table>
<thead><tr><th>Title</th><th>Author</th><th>Pages</th><th>Read</th></tr></thead>
<tbody>
</tbody>
</table>
</div>
<button id="newBook">New Book</button>
<form id="addBook" hidden>
<label>Title:</label><br>
<input id="title" type="text" name="title"><br>
<label>Author:</label><br>
<input id="author" type="text" name="author"><br>
<label>Number of pages:</label><br>
<input id="number_of_pages" type="text" name="number_of_pages"><br>
<label>Have you read this book ?:</label><input id="read" type="checkbox" name="read"><br>
<input type="submit" value="Add Book">
</form>
</body>
</html>
I know maybe it would be better to work with pure JavaScript and not jQuery but I just want to practice a little in jQuery.
The problems in your code:
You must prevent the form from submiting and refreshing the page. Use return false on the onsubmit for this. (thats the reason of the blank page after submission):
<form id="addBook" onsubmit="return false" hidden>
</form>
After adding a book, you must call showLibrary() in order for it to appear in the table:
$("#addBook").on("submit",function(){
//...
//...
//rerender the library after book add
showLibrary();
})
You must clear the table tbody before rerendering the library:
function showLibrary()
{
//Clear the tbody before rendering library:
$("#books tbody").html('');
//...
//...
}
Here is your original code, with these three updates:
let library=[];
let book;
function Book(title,author,number_of_pages,read){
this.title=title;
this.author=author;
this.number_of_pages=number_of_pages;
this.read=read;
}
function addBook(title,author,number_of_pages,read){
let book=new Book(title,author,number_of_pages,read);
library.push(book);
}
addBook("Hobbit1","Tolkien",130,"read");
$(document).ready(function(){
//Show form to add a new Book
$("#newBook").on("click",function(){
$("form").slideDown(500);
})
$("#addBook").on("submit",function(){
let title=$("#title").val();
let author=$("#author").val();
let number_of_pages=$("#number_of_pages").val();
let read=$("#read").val();
addBook(title,author,number_of_pages,read);
//rerender the library after book add
showLibrary();
})
//Remove rows
$(document).on("click", "#delete", function(){
$(this).closest('tr').remove();
library.splice(library.findIndex(x=>x.title==$(this).attr('class')),1);
});
function showLibrary()
{
//Clear the tbody before rendering library:
$("#books tbody").html('');
library.forEach(function (item,index){
$("#books tbody").append("<tr> <td>"+item.title+"</td> <td> "+item.author+"<td> "+item.number_of_pages+"</td> <td> "+item.read+"</td> <td> <button id=delete class="+item.title+">Delete</button> </td> </tr>");
})
}
showLibrary();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Whatever</title>
</head>
<body>
<h2>Books</h2>
<div id="books">
<table>
<thead><tr><th>Title</th><th>Author</th><th>Pages</th><th>Read</th></tr></thead>
<tbody>
</tbody>
</table>
</div>
<button id="newBook">New Book</button>
<form id="addBook" onsubmit="return false" hidden>
<label>Title:</label><br>
<input id="title" type="text" name="title"><br>
<label>Author:</label><br>
<input id="author" type="text" name="author"><br>
<label>Number of pages:</label><br>
<input id="number_of_pages" type="text" name="number_of_pages"><br>
<label>Have you read this book ?:</label><input id="read" type="checkbox" name="read"><br>
<input type="submit" value="Add Book">
</form>
</body>
</html>
I am setting up a simple php form to collect entries and insert/show them to a myphpmyAdmin db, this works fine. The little problem I'm having is when i try to put in a small bit of js to clear text and also give a popup alert, neither will work, can somebody help me please.
Here is my Javascript file:
function clear(){
document.getElementById("in1", "in2", "in3", "in4", "in5",).value= "";
}
function saved() {
alert("Well done yourself, you have saved an entry to the database.");
}
And here is my php file:
<html>
<head>
<meta charset="utf-8">
<title>CS230 Assignment 3</title>
<link rel="stylesheet" href="style1.css" type="text/css" media="all" />
<script src="myjs.js" type="text/javascript"></script>
</head>
<body>
<h3>Diary:</h3>
<form action="insert.php" method="post">
<div id="table">
<table>
<tr>
<th>When/Where</th>
<th>Event</th>
<th>Emotion</th>
<th>Automatic Thoughts</th>
<th>Rational Response</th>
</tr>
<tr>
<td><input type="text" style="height:500px;" name="in1" id="in1"></td>
<td><input type="text" style="height:500px;" name="in2" id="in2"></td>
<td><input type="text" style="height:500px;" name="in3" id="in3"></td>
<td><input type="text" style="height:500px;" name="in4" id="in4"></td>
<td><input type="text" style="height:500px;" name="in5" id="in5"></td>
</tr>
</table>
</div>
<div id="buttons">
<input type="submit" name="save" id="save" value="Save Entry" onclick="saved()">
</div>
</form>
<div id="clearButton">
<button id="clear" onClick="clear();">clear</button>
</div>
<form action="show.php" method="post">
<input type="submit" name="show" id="show" value="Show Diary">
</form>
</body>
</html>
The document.getElementById() function takes one argument. If you want to fetch a list of elements, you can use .querySelectorAll():
var elements = document.querySelectorAll("#in1, #in2, #in3, #in4, #in5");
That returns a node list, so you'll have to iterate to perform an operation on each one:
function clear(){
var elements = document.querySelectorAll("#in1, #in2, #in3, #in4, #in5");
for (var i = 0; i < elements.length; ++i)
elements[i].value = "";
}
edit — you'll probably want to use a name other than "clear" as "clear" is likely to collide with something; in-line event handlers are highly susceptible to that sort of issue. Alternatively you could explicitly reference window.clear():
<button id="clear" onClick="window.clear();">clear</button>
I'm having trouble with AngularJS form validation. Below is a simple two-field form with the only requirements being that data for each field is required, one of which is of "email" type.
The trouble is, no matter what I put as the value for either of the two fields, Angular's .$valid always returns the value of true and $invalid returns the value of false. It can be an empty field, a valid/invalid email address, or as long a string as I choose. The result is the same.
Therefore, the submit button is never disabled because I'm using
ng-disabled="FormLogin.$invalid"
However, if I use a variable from the controller, the submit button is disabled
ng-disabled="disableSubmit"
This suggests that Angular is working, but I haven't set up the directives correctly in the form controls. Note that ng-model directives appear to applied correctly.
I've tried many different variations of code on them, some pretty desperate, to no avail. There are other SO questions regarding this same subject, but I didn't find any that applied. Any suggestions you may have would be great. Thanks.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="formCtrl" align="center" style="width:400px;padding: 10px 10px 10px 10px;">
<table class="table table-stripe"><form name="FormLogin" ng-submit="submitForm(FormLogin.$valid)" novalidate>
<tr>
<td>User:</td>
<td>
<input type="email" name="email" class="form-control" ng-model="email" required />
</td>
</tr>
<tr>
<td>Pwd:</td>
<td><input type="password" name="password" class="form-control" ng-model="password" required /></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" class="form-control" style="width:200px;" ng-disabled="FormLogin.$invalid">Log In</button>
</td>
</tr></form>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.disableSubmit = true;
$scope.email = 'testUser#testDomain.com';
$scope.password = 'y!keZ';
$scope.submitForm = function(isValid) {
alert($scope.email + ':' + $scope.password + ':' + isValid);
};
});
</script>
</body>
</html>
Your issue is due to invalid html, you have nested the form directly under table which is incorrect and the browser will throw it out of the table (or whatever it decides to do) as it renders (before even angular processes the DOM) and the angular validations does not work properly.
Demo wrapping the table inside the form
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.disableSubmit = true;
$scope.email = 'testUser#testDomain.com';
$scope.password = 'y!keZ';
$scope.submitForm = function(isValid) {
console.log($scope.email + ':' + $scope.password + ':' + isValid);
};
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="formCtrl" align="center" style="width:400px;padding: 10px 10px 10px 10px;">
<form name="FormLogin" ng-submit="submitForm(FormLogin.$valid)" novalidate>
<table class="table table-stripe">
<tr>
<td>User:</td>
<td>
<input type="email" name="email" class="form-control" ng-model="email" required />
</td>
</tr>
<tr>
<td>Pwd:</td>
<td>
<input type="password" name="password" class="form-control" ng-model="password" required />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" class="form-control" style="width:200px;" ng-disabled="FormLogin.$invalid">Log In</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
I am trying to build a status comment type of system using angularJS. The first textbox allows the user to put the value in an array and thus display it on the page. On clicking also allows a textbox and a button to enter the comment. The value of comment however is not displaying inside the scope. The code is :
HTML
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="status.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">
<div>
<h2>Status!</h2>
Post status here :<br>
<textarea rows="5" cols="50" ng-model="value"></textarea>
<button ng-click="addstatus()">Click to Add!</button>
<br><br><br>
<table>
<tr ng-repeat="add in statushow">
<td><h3>{{add.value}}</h3>
<input ng-model="commentvalue" type="text" size="40" placeholder="Enter your comment here!"></input>
<button ng-click="addcomment()">Add comment!</button>
<table>
<tr ng-repeat="comms in comments">
<td><h4>{{comms.commentvalue}}</h4></td></tr></table>
</td>
</tr>
</table>
{{commentvalue}}
</div>
STATUS.JS
var app = angular.module('myApp', [])
app.controller('userCtrl', function($scope) {
$scope.statushow = [];
$scope.comments = [];
$scope.addcomment= function(){
$scope.comments.push({
commentvalue: $scope.commentvalue
});
$scope.value="";
};
$scope.addstatus= function(){
$scope.statushow.push({
value: $scope.value
});
$scope.value="";
};
});
Try with this http://jsfiddle.net/rrfqaf9L/2/:
<div ng-app="myApp" ng-controller="userCtrl">
<h2>Status!</h2>
Post status here :
<br>
<textarea rows="5" cols="50" ng-model="value"></textarea>
<button ng-click="addstatus()">Click to Add!</button>
<br>
<br>
<br>
<table>
<tr ng-repeat="add in statushow">
<td>
<h3>{{add.value}}</h3>
<input ng-model="add.commentvalue" type="text" size="40" placeholder="Enter your comment here!"></input>
<button ng-click="addcomment(add)">Add comment!</button>
<table>
<tr ng-repeat="comms in add.comments">
<td>
<h4>{{comms.commentvalue}}</h4>
</td>
</tr>
</table>
</td>
</tr>
</table>{{commentvalue}}</div>
Javascript:
var app = angular.module('myApp', [])
app.controller('userCtrl', function($scope) {
$scope.statushow = [];
$scope.addcomment= function(add){
if (typeof add.comments == 'undefined') add.comments = [];
add.comments.push({
commentvalue: add.commentvalue
});
add.commentvalue="";
};
$scope.addstatus= function(){
$scope.statushow.push({
value: $scope.value
});
$scope.value="";
};
});
A suggestion would be not to use specific keywords such as add, value as model or variable names.
You could send the model through the function as a parameter:
<textarea rows="5" cols="50" ng-model="status"></textarea>
<button ng-click="addstatus(status)">Click to Add!</button>
<table>
<tr ng-repeat="stat in statushow">
<td><h3>{{stat.value}}</h3>
<input ng-model="commentvalue" type="text" size="40" placeholder="Enter your comment here!"></input>
<button ng-click="addcomment(commentvalue)">Add comment!</button>
<table>
<tr ng-repeat="comms in comments">
<td><h4>{{comms.commentvalue}}</h4></td></tr></table>
</td>
</tr>
</table>
{{commentvalue}}
</div>
Modify the controller as:
$scope.addcomment= function(comment){
$scope.comments.push({
commentvalue: comment
});
};
$scope.addstatus= function(status){
$scope.statushow.push({
statusvalue: status
});
};
See fiddle: http://jsfiddle.net/HB7LU/15033/
The quickest way to do it would be to change the following and add $parent. NG-Repeat creates child scopes, so the input box wasn't adding the correct scope.
<input ng-model="$parent.commentvalue" type="text" size="40" placeholder="Enter your comment here!"></input>
Here's the code pen.
http://codepen.io/shuffguy/pen/gpezOM?editors=101
I have the following application and have been having issues on getting the application to display the object values beside the form. Its showing the divs and styles correctly but no values. Anyone see why that could be?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Employee Directory</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/application.css">
<script src="js/angular.min.js"></script>
<script src="js/application.js"></script>
<script src="js/dataService.js"></script>
</head>
<body ng-app="MyApp">
<div class="container">
<h1>Employee Directory</h1>
<hr>
<div id="form-container">
<h3>Add an Entry</h2>
<form role="form">
<div class="form-group">
<label for="name">Employee:</label>
<input type="text" name="name" class="form-control" ng-model="employeeName">
</div>
<div class="form-group">
<label for="name">Street:</label>
<input type="text" name="street" class="form-control" ng-model="employeeStreet">
</div>
<div class="form-group">
<label for="name">City:</label>
<input type="text" name="name" class="form-control" ng-model="employeeCity">
</div>
<div class="form-group">
<label for="name">State:</label>
<input type="text" name="state" class="form-control" ng-model="employeeState">
</div>
<div class="form-group">
<label for="name">Zip Code:</label>
<input type="text" name="zipcode" class="form-control" ng-model="employeeZipCode">
</div>
<input type="submit" ng-click="addName()" class="btn btn-default btn-primary" value="Add Entry">
</form>
</div>
<div id="employee-list">
<div ng-repeat"employee in employeesArray" class="employee">
<div class="employee-header">
<span class="glyphicon glyphicon-user"></span><strong>{{employee.employeeName}}</strong><button ng-click="deleteName()" class="cancel">X</button>
</div>
<div class="employee-footer">
<address>
{{employee.employeeStreet}}<br>
{{employee.employeeCity}}, {{employeeState}} {{employeeZipCode}}
</address>
</div>
</div>
</div>
</div>
</body>
</html>
application.js
angular.module("MyApp", []).controller("DBController", function ($scope, dataService) {
$scope.employeeName;
$scope.employeeStreet;
$scope.employeeCity;
$scope.employeeState;
$scope.employeeZipCode;
$scope.employeesArray = dataService.getEmployees();
$scope.addEmployee = function() {
dataService.addEmployee($scope.employeesArray.push({"employeeName": $scope.employeeName, "employeeStreet": $scope.employeeStreet, "employeeCity": $scope.employeeCity, "employeeState": $scope.employeeState, "employeeZipCode": $scope.employeeZipCode}));
}
$scope.deleteEmployee = function(deletedEmployee) {
dataService.removeEmployee(deletedEmployee);
} });
dataService.js
angular.module("MyApp").service("dataService", function() {
var employeesArray = [{employeeName:'Joe Smith', employeeStreet:'12345 West 123nd Terrace', employeeCity:'Canton', employeeState:'Ohio', employeeZipCode:'12345'}];
this.getEmployees = function() {
return employeesArray;
}
this.addEmployee = function(employee) {
employeesArray.push(employee);
}
this.removeEmployee = function(employee) {
employeesArray.splice(employeesArray.indexOf(), 1);
}
});
Couple of things wrong in your code. First:
<body ng-app="MyApp">
bootstraps your view with the MyApp module, but you have no controller declarations, so your controller code isn't running. Change it to:
<body ng-app="MyApp" ng-controller="DBController">
Second,
<input type="submit" ng-click="addName()" class="btn btn-default btn-primary" value="Add Entry">
is wrong, because your controller doesn't declare a scope function called addName. It's addEmployee, so the correct code is:
<input type="submit" ng-click="addEmployee()" class="btn btn-default btn-primary" value="Add Entry">
Finally,
<div ng-repeat"employee in employeesArray" class="employee">
is missing an equals sign. The correct code is:
<div ng-repeat="employee in employeesArray" class="employee">
With those three things corrected, you'll start to see some results (check out this plunk to see them right away).
Edit:
The next problems in your code are here:
dataService.addEmployee($scope.employeesArray.push({"employeeName": $scope.employeeName, "employeeStreet": $scope.employeeStreet, "employeeCity": $scope.employeeCity, "employeeState": $scope.employeeState, "employeeZipCode": $scope.employeeZipCode}));
Because you're manipulating the employeesArray by calling push and then calling addEmployee with the result of the push. This is a problem, because your getEmployees call returns a reference to the array, and what you are manipulating in the push call is in fact the internal state of DataService. Hence the duplicate effect. Instead, if you do this:
var employee = {
"employeeName": $scope.employeeName,
"employeeStreet": $scope.employeeStreet,
"employeeCity": $scope.employeeCity,
"employeeState": $scope.employeeState,
"employeeZipCode": $scope.employeeZipCode
};
dataService.addEmployee(employee);
you'll rid yourself of the duplicate record. Finally, your bindings in the ng-repeat look like this:
{{employee.employeeStreet}}<br>
{{employee.employeeCity}}, {{employeeState}} {{employeeZipCode}}
note that the last two bindings don't reference the employee in your ng-repeat, but instead refer to the ng-models in the parent scope. Change that to:
{{employee.employeeStreet}}<br>
{{employee.employeeCity}}, {{employee.employeeState}} {{employee.employeeZipCode}}