Question

我正在查看一些奇怪的代码，我重申它是为了验证它是否有效，并且出于某种原因，它提交了我的表单之后没有和发生了什么。似乎没有任何东西出现在我的employeesList中，但如果我刷新屏幕则会显示出来。此外，如果我单击X删除用户没有任何反应，我在控制台中没有收到任何错误。

除非我刷新屏幕，否则为什么我看不到我的员工名单？

如果我点击删除图标，为什么不删除员工。

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 an 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 by $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>

Answer 1

您似乎在初始页面加载时设置了范围employeesList，但是在添加员工或删除员工时，您不会重新关联它。每次修改数据时都需要设置$scope.employeesList。

$scope.employeesList = dataService.getEmployees();

您要为范围视图设置数据。

员工列表仅存在于窗口刷新中

1 个答案: