Question

我正在使用Angular JS和Web服务提交表单。这是代码 -

<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>

我想在Edit上重复使用这些文本框，即在编辑时单击相应的行项必须填充，“保存”按钮现在应该像“更新”按钮一样工作。我该怎么做？或者，如何使行可编辑？

Answer 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（），可以识别天气以保存或更新员工

更新Angular JS中的行

1 个答案: