i'm looking @ odd code , reran verify works , reason not , happening after submit form. nothing seems show in employeeslist if refresh screen show up. also, if click x delete user nothing happens , receive no errors in console.
why can't see list of employees unless refresh screen?
why doesn't employee removed if click delete icon.
js/application.js
angular.module("employeesapp", []).controller("dbcontroller", function ($scope, dataservice) { $scope.employeename; $scope.employeestreet; $scope.employeecity; $scope.employeestate; $scope.employeezipcode; $scope.employeeslist = dataservice.getemployees(); $scope.addemployee = function() { var employee = { "employeename": $scope.employeename, "employeestreet": $scope.employeestreet, "employeecity": $scope.employeecity, "employeestate": $scope.employeestate, "employeezipcode": $scope.employeezipcode }; dataservice.addemployee(employee); $scope.employeename = ''; $scope.employeestreet = ''; $scope.employeecity = ''; $scope.employeestate = ''; $scope.employeezipcode = ''; } $scope.deleteemployee = function(deletedemployee) { dataservice.removeemployee(deletedemployee); } }); js/dataservice.js
angular.module("employeesapp").service("dataservice", function () { var employeeslist = []; this.getemployees = function () { var str = localstorage.getitem("employees"); employeeslist = json.parse(str) || employeeslist; return employeeslist; }; this.addemployee = function (employee) { var employeeslist = this.getemployees(); employeeslist.push(employee); var str = json.stringify(employeeslist); localstorage.setitem("employees", str); }; this.removeemployee = function (employee) { var employeeslist = this.getemployees(); employeeslist.splice(employeeslist.indexof(employee), 1); var str = json.stringify(employeeslist); localstorage.setitem("employees", str); }; }); index.html
<!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"> </head> <body ng-app="employeesapp" ng-controller="dbcontroller"> <div class="container"> <h1>employee directory</h1> <hr> <div class="row"> <div class="col-md-6"> <h3>add entry</h2> <form role="form"> <div class="form-group"> <label for="name">employee:</label> <input type="text" id="name" name="name" class="form-control" ng-model="employeename"> </div> <div class="form-group"> <label for="street">street:</label> <input type="text" id="street" name="street" class="form-control" ng-model="employeestreet"> </div> <div class="form-group"> <label for="city">city:</label> <input type="text" id="city" name="city" class="form-control" ng-model="employeecity"> </div> <div class="form-group"> <label for="state">state:</label> <input type="text" id="state" name="state" class="form-control" ng-model="employeestate"> </div> <div class="form-group"> <label for="zipcode">zip code:</label> <input type="text" id="zipcode" name="zipcode" class="form-control" ng-model="employeezipcode"> </div> <button type="submit" ng-click="addemployee()" class="btn btn-primary">add</button> </form> </div> <div class="col-md-6" id="employee-list"> <div ng-repeat="employee in employeeslist track $index" class="employee"> <div class="employee-header"> <span class="glyphicon glyphicon-user"></span> <strong>{{employee.employeename}}</strong> <span ng-click="deleteemployee(employee)" class="glyphicon glyphicon-remove"></span> </div> <div class="employee-footer"> <address> {{employee.employeestreet}}<br> {{employee.employeecity}}, {{employee.employeestate}} {{employee.employeezipcode}} </address> </div> </div> </div> </div> </div> <script src="js/angular.min.js"></script> <script src="js/application.js"></script> <script src="js/dataservice.js"></script> </body> </html>
it appears setting scopes employeeslist on initial page load, not re-associating when add employees or delete employees. need set $scope.employeeslist every time modify data.
$scope.employeeslist = dataservice.getemployees(); is line setting data scope's view.
Comments
Post a Comment