Angular Js中的内联编辑

时间:2016-05-31 15:01:39

标签: angularjs

我想在Angular JS中实现内联编辑,但是下面的代码无效。

<tr ng-repeat="employee in employees" ng-include="getTemplate(employee)">
                    <script type="text/ng-template" id="display">
                    <td>{{employee.Name}}</td>
                    <td ng-bind="employee.Age"></td>
                    <td ng-bind="employee.City"></td>
                    <td><a href="#" ng-click="EditEmployee(employee.EmpId)">Edit</a> </td>
                    <td><a href="#" ng-click="DeleteEmployee(employee.EmpId)">Delete</a> </td>
</script>


                    <script type="text/ng-template" id="edit">
    <td><input type="hidden" ng-model="newemployee.EmpId" class="form-control input-sm"/></td>
    <td><input type="text" ng-model="newemployee.Name" class="form-control input-sm"/></td>
    <td><input type="text" ng-model="newemployee.Age" class="form-control input-sm"/></td>
    <td><input type="text" ng-model="newemployee.City" 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>

以下代码未被调用 -

$scope.employees = [];
$scope.getTemplate = function (employee) {
        if (employee.empId === $scope.selected.empId){
            return 'edit';
        }
        else return 'display';
    };

1 个答案:

答案 0 :(得分:0)

ngInclude指令主要用于在页面中包含HTML块。我不确定你真的需要它。

你可能只是这样做:

<tr ng-repeat="employee in employees" {{getTemplate(employee)}}">

或者如果您愿意,可以将这些标签添加到class属性中:

 <tr ng-repeat="employee in employees" class="{{getTemplate(employee)}}">