Question

我的代码中出现错误，因为我的代码的某些部分无法正常工作。 HTML和CSS的两个部分都可以正常工作，只是AngularJS无法正常工作。在上述表格中插入值时，我需要将员工详细信息发送到下表。请解决我的问题。

下面您可以找到我的HTML，CSS和AngularJS代码。

var app = angular.module("myapp", []);
app.controller("CRUDoperation", function ($scope) {
    $scope.Emplist = [];
    $scope.AddData = function () {

        var emp = {
            Id: $scope.Emplist.length + 1,
            Name: $scope.Name,
            Salary: $scope.Salary
        };

        $scope.Emplist.push(emp);
        ClearModel();
    };
});

function ClearModel() {
    $scope.Id = 0;
    $scope.Name = '';
    $scope.Salary = 0;
};

$scope.DeleteData = function (emp) {
    var index = $scope.Emplist.indexOf(emp);
    $scope.Emplist.splice(index, 1);
};

$scope.BindSelectedData = function (emp) {
    $scope.Id = emp.Id;
    $scope.Name = emp.Name;
    $scope.Salary = emp.Salary;
};

$scope.UpdateData = function () {
    $.grep($scope.Emplist, function (e) {
        if (e.Id == $scope.Id) {
            e.Name = $scope.Name;
            e.Salary = $scope.Salary;
        }
    })
};

body {
    background-image: url("back.jpg");
}

h1 {
    text-align: center;
    color: Crimson;
}

#save {
    position: absolute;
    left: 400px;
    top: 240px;
    width: 150px;
    height: 40px;
    color: white;
    background-color: pink;
    font-size: 18px;
}

#save:hover {
    color: black;
    background-color: Magenta;
    cursor: pointer;
}

#update:hover {
    color: black;
    background-color: SaddleBrown;
    cursor: pointer;
}

#update {
    position: absolute;
    left: 230px;
    top: 240px;
    width: 150px;
    height: 40px;
    color: white;
    background-color: Peru;
    font-size: 18px;
}

#del {
    width: 110px;
    height: 35px;
    color: white;
    background-color: SeaGreen;
    font-size: 18px;
}

#del:hover {
    color: black;
    background-color: OrangeRed;
    cursor: pointer;
}

#table1 {
    position: absolute;
    top: 300px;
    left: 0px;
    background-color: gray;
}

#table1:hover {
    cursor: copy;
}

input[type=text] {
    position: absolute;
    top: 130px;
    left: 150px;
    width: 400px;
    height: 35px;
}

input[type=number] {
    position: absolute;
    top: 180px;
    left: 150px;
    width: 400px;
    height: 35px;
}

#hidden {
    position: absolute;
    top: 80px;
    left: 150px;
    width: 400px;
    height: 35px;
    background-color: gray:
}

#hidden:hover {
    cursor: not-allowed;
}

span {
    position: absolute;
    top: 90px;
    font-size: 25px;
}

span1 {
    position: absolute;
    top: 135px;
    font-size: 25px;
}

span2 {
    position: absolute;
    top: 185px;
    font-size: 25px;
}

<!DOCTYPE html>
<<!DOCTYPE html>
    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <meta charset="UTF-8">
        <title>Angular Web App</title>
    </head>

    <body>
        <h1>Employee Details</h1>
        <div ng-app="myapp" ng-controller="CRUDoperation"></div>
        <div class id="center">
            <table>
                <tr>
                    <td><span>ID</span></td>
                    <td><input type="text" id="hidden" disabled="disabled" placeholder="Auto Filled" ng-model="Id"></td>
                </tr>
                <tr>
                    <td>
                        <span1>Name</span1>
                    </td>
                    <td><input type="text" placeholder="Enter Employee Name here" ng-model="Name"></td>
                </tr>
                <tr>
                    <td>
                        <span2>Salary</span2>
                    </td>
                    <td><input type="number" placeholder="Enter Salary Amount here" ng-model="Salary"></td>
                </tr>
                <tr>
                    <td><input type="button" id=save ng-click="AddData()" value="Save Data"> </td>
                </tr>
                <tr>
                    <td><input type="button" id=update ng-click="UpdateData()" value="Update Data"> </td>
                </tr>
            </table>
            <table border="2" id="table1" style="width:550px;">
                <thead>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Salary</th>
                </thead>
                <tr ng-click="BindSelectedData(Emp)" ng-repeat="Emp in Emplist">
                    <td>{{emp.Id}}</td>
                    <td>{{emp.Name}}</td>
                    <td>{{emp.Salary}}</td>
                    <td><input type="button" ng-click="DeleteData(Emp)" id=del value="Delete"></td>
                </tr>
            </table>
            <table border="2" id="table1" style="width:550px;">
                <thead>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Salary</th>
                </thead>
                <tr ng-click="BindSelectedData(Emp)" ng-repeat="Emp in Emplist">
                    <td>{{emp.Id}}</td>
                    <td>{{emp.Name}}</td>
                    <td>{{emp.Salary}}</td>
                    <td><input type="button" ng-click="DeleteData(Emp)" id="del" value="Delete"></td>
                </tr>
            </table>
    </body>
    </html>

Answer 1

Angular使用camelCase +插值。因此，它实际上是ng-thing，而不是ngThing，并且您还必须在它们周围加上括号和方括号。所以，应该是

[(ngModel)]="blahblah"

[(ngRepeat)]="blahblah"

[(ngClick)]="blahblah"

等

此外，您有两次<!DOCTYPE>。那也可能导致您的问题。

将详细信息插入表单时，值未发送到表

1 个答案: