Question

我有以下应用程序，并且在让应用程序在表单旁边显示对象值方面遇到了问题。它正确显示div和样式但没有值。任何人都明白为什么会这样？

<!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);
    }
});

Answer 1

您的代码中出现了一些错误。第一：

<body ng-app="MyApp">

使用MyApp模块引导您的视图，但您没有控制器声明，因此您的控制器代码不会运行。将其更改为：

<body ng-app="MyApp" ng-controller="DBController">

其次，

<input type="submit" ng-click="addName()" class="btn btn-default btn-primary" value="Add Entry">

是错误的，因为你的控制器没有声明一个名为addName的范围函数。它是addEmployee，所以正确的代码是：

<input type="submit" ng-click="addEmployee()" class="btn btn-default btn-primary" value="Add Entry">

最后，

<div ng-repeat"employee in employeesArray" class="employee">

缺少等号。正确的代码是：

<div ng-repeat="employee in employeesArray" class="employee">

如果纠正了这三件事，您就会开始看到一些结果（请查看this plunk以立即查看）。

编辑：

您的代码中存在以下问题：

dataService.addEmployee($scope.employeesArray.push({"employeeName": $scope.employeeName, "employeeStreet": $scope.employeeStreet, "employeeCity": $scope.employeeCity, "employeeState": $scope.employeeState, "employeeZipCode": $scope.employeeZipCode}));

因为您通过调用push然后使用push的结果调用addEmployee来操作employeesArray。这是一个问题，因为你的getEmployees调用返回对数组的引用，你在push调用中操作的实际上是DataService的内部状态。因此重复的效果。相反，如果你这样做：

    var employee = {
      "employeeName": $scope.employeeName, 
      "employeeStreet": $scope.employeeStreet, 
      "employeeCity": $scope.employeeCity, 
      "employeeState": $scope.employeeState, 
      "employeeZipCode": $scope.employeeZipCode
    };
    dataService.addEmployee(employee);

你将摆脱重复的记录。最后，你在ng-repeat中的绑定看起来像这样：

                    {{employee.employeeStreet}}<br>
                    {{employee.employeeCity}}, {{employeeState}} {{employeeZipCode}}

请注意，最后两个绑定不会引用ng-repeat中的员工，而是引用父作用域中的ng-models。将其更改为：

                    {{employee.employeeStreet}}<br>
                    {{employee.employeeCity}}, {{employee.employeeState}} {{employee.employeeZipCode}}

不显示带有Angular的数组对象值

1 个答案: