2016-05-30 53 views
0

我使用Angular JS和Web服务提交表单。这里是代码 -Angular JS中的更新行

<table> 
    <tr> 
     <td style="text-align: right;">Name : 
     </td> 
     <td> 
      <input type="text" id="txtEmpName" ng-model="EmpName" /> 
     </td> 
    </tr> 
    <tr> 
     <td style="text-align: right;">Age : 
     </td> 
     <td> 
      <input type="text" id="txtEmpAge" ng-model="EmpAge" /> 
     </td> 
    </tr> 
    <tr> 
     <td style="text-align: right;">City : 
     </td> 
     <td> 
      <input type="text" id="txtEmpCity" ng-model="EmpCity" /> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2" style="text-align: center;"> 
      <input type="submit" id="btnSubmit" value="Submit" /> 
     </td> 
    </tr> 
</table> 

我想使这些文本框上编辑即可重复使用的相应行项目编辑点击必须填写和保存按钮,现在应该那样工作更新按钮。 我该怎么办? 或者,我可以如何使行可编辑?

+0

p拉塞看到这个http://stackoverflow.com/questions/37513025/isolated-scope-for-items-inside-ng-repeat-in-directive-template/37513346#37513346 –

+0

好吧,该链接不再帮助我。 –

回答

1

理想情况下,你会想要创建的模型作为 Employee.Name,Employee.Age,Employee.City

现在

<table> 
    <tr> 
     <td style="text-align: right;">Name : 
     </td> 
     <td> 
      <input type="text" id="txtEmpName" ng-model="Employee.Name" /> 
     </td> 
    </tr> 
    <tr> 
     <td style="text-align: right;">Age : 
     </td> 
     <td> 
      <input type="text" id="txtEmpAge" ng-model="Employee.Age" /> 
     </td> 
    </tr> 
    <tr> 
     <td style="text-align: right;">City : 
     </td> 
     <td> 
      <input type="text" id="txtEmpCity" ng-model="Employee.City" /> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2" style="text-align: center;"> 
      <button type="button" id="btnSubmit" ng-click="saveEmployee()">{{Employee.id ? "Edit" : "Create"}}</button> 
     </td> 
    </tr> 
</table> 

在控制器

$scope.saveEmployee = function(){ 
     if($scope.Employee.id){ 
      // Id will be present for a existing employee 
      // update the Employee 
      }else { 
      // Id not present 
      // create the employee    
      } 
    } 

我将有一个该模型中的Employee.save()可以识别天气以保存或更新员工