Question

我在对象 empID，empName，empEmail 中有3个值我的问题出在函数gettemplete function（），

中

 var app = angular.module('myApp' , []);

app.controller('myCtrl' , function($scope){
    $scope.count=0;
$scope.employees = [{empID:$scope.count+1,empName:'lin',empEmail:'b@1.in'},{empID:$scope.count+1,empName:'test',empEmail:'aaa@3.com'}];
    $scope.employeeData = {};
    $scope.selected = {};

    $scope.addEmployee = function(){

        $scope.employees.push({
            empName : $scope.empName,
            empEmail : $scope.empEmail
        });
        console.log($scope.employees);
    };

    $scope.deleteEmployee = function(employee){
        var index = $scope.employees.indexOf(employee);
        $scope.employees.splice(index,1);
        console.log($scope.employees);
    };

    $scope.getTemplate = function (employee) {
        if (employee.empID === $scope.selected.empID){
            console.log(employee.empID);
            console.log($scope.selected.empID);
            console.log("edit");
            return 'edit';
        }

        else {
            console.log("display");
            console.log(employee.empID);
            console.log($scope.selected.empID);
            return 'display';
        }
    };

    $scope.reset = function () {
        $scope.selected = {};
        console.log($scope.selected);

    };

    $scope.add = function(){
        $scope.addEmployee();
    };

    $scope.editEmployee = function (employee) {
        $scope.selected = angular.copy(employee);
        console.log($scope.selected);
        console.log(employee);
        console.log($scope.selected);
    };

    $scope.updateEmployee = function(employee) {
        $scope.employees.push({
            empName : $scope.empName,
            empEmail : $scope.empEmail
        });
        console.log($scope.employees);
        $scope.getTemplate();
        $scope.reset();
    };
});

这是我的HTML代码

<body ng-controller="myCtrl">
        <div>
            <h3>List Employees</h3>
            <table class="table table-striped table-bordered">
                <thead>
                    <th>empID</th>
                    <th>Employee Name</th>
                    <th>Employee Email</th>
                    <th>Action</th>
                </thead>
                <tbody>
                    <tr ng-repeat="employee in employees" ng-include="getTemplate(employee)">
                        <script type="text/ng-template" id="display">
                            <td>{{employee.empID}}</td>
                            <td>{{employee.empName}}</td>
                            <td>{{employee.empEmail}}</td>
                            <td>
                                <button type="button" class="btn btn-primary" ng-click="editEmployee(employee)">Edit</button>
                                <button type="button" class="btn btn-danger" ng-click="deleteEmployee(employee)">Delete</button>
                            </td>
                        </script>
                        <script type="text/ng-template" id="edit">
                            <td>{{employee.empID+ 1}}</td>
                            <td><input type="text" ng-model=employee.empName class="form-control input-sm"/></td>
                            <td><input type="text" ng-model=employee.empEmail class="form-control input-sm"/></td>
                            <td>
                                <button type="button" class="btn btn-primary" ng-click="updateEmployee(employee)">Save</button>
                                <button type="button" class="btn btn-danger" ng-click="reset()">Cancel</button>
                            </td>
                        </script>
                    </tr>
                </tbody>
            <table>
            <button ng-click="add()"> Add row </button>
        </div>
    </body>

我可以显示我的empName和empEmail，但我不知道如何显示 empID 。我有一个名为 addrow 的按钮，用于在表格中创建一行，所以当我点击该按钮时，我需要将empID计为3,4,5，等等。

Answer 1

你的empId不是数字，它是一个字符串

更改此

empID:'1'

到此

empID:1

所以你的数组

$scope.employees = [{empID:1,empName:'lin',empEmail:'b@1.in'},{empID:2,empName:'test',empEmail:'aaa@3.com'}];

<input type="number"  ng-model="employee.empID" class="form-control input-sm"/>

增加employeeId，你可以这样做

<button type="button" class="btn btn-primary" ng-click="saveEmployee(employee); empId = empId+1" ng-init="empId=1">Save</button>

Current count = {{empId}}

Answer 2

尝试更改addEmployee函数，如下所示。

$scope.addEmployee = function(){

    $scope.employees.push({
        empId : $scope.count++,
        empName : $scope.empName,
        empEmail : $scope.empEmail
    });
    console.log($scope.employees);
};

如果您要创建少量样本员工，请确保通过addEmployee函数添加它们。这样计数会自动增加。但是，如果要静态创建一些员工，请正确分配计数。欢呼声。

如何使用表格行中的ng-model绑定数据（内联编辑）

2 个答案: