Angular Js中的内联编辑

Question

我想在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> 

下面的代码是没有得到called-

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

Answer 1

的ngInclude指令主要用于包括HTML的块到您的网页。我不确定你在这里真的需要它。

也许你可以简单地做：

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

或添加这些标签到类的属性，如果你喜欢：

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