Question

我正在开发的页面进行检查。一种位置检查具有多种程序。每个程序都有一堆问答（多项选择），文本框和表格（ngrepeat）

我面临的问题是表中添加CRUD操作。我在编码时的想法是在tr中有一个Add按钮。单击“添加”按钮后，ng-Show将显示另一个tr。该tr将带有文本框和按钮（保存和取消）。单击“保存”或“取消”时，将执行预期的操作并使该行不可见

问题是我的皮革在保存后无法正常工作，也不会清除文本框

我创建了一个jsfiddle链接来模拟问题

我的实际代码

<table class="table table-bordered table-striped table-hover table-condensed" ng-disabled="IsReadOnlyView">
<thead>
    //headings
</thead>
<tbody>
    <tr ng-repeat="itemMS in item.MenuServedList" ng-form="FormEditMenu">
        //edit row
    </tr>
    <tr ng-hide="addModeMenu" ng-form="FormAddMenu">
        <td>
            <input type="text" ng-model="PortionSize" class="form-control input-sm" ng-required="true" name="PortionSize" ng-style="OnMenuSave && FormAddMenu.PortionSize.$invalid && { 'border' : 'solid 1px red' }" />
            <span ng-show="OnMenuSave && FormAddMenu.$dirty && FormAddMenu.PortionSize.$invalid" style="color:red;">Required</span>
        </td>
        <td>
            <input type="text" ng-model="Items" class="form-control input-sm" ng-required="true" name="Items" ng-style="OnMenuSave && FormAddMenu.Items.$invalid && { 'border' : 'solid 1px red' }" />
            <span ng-show="OnMenuSave && FormAddMenu.$dirty && FormAddMenu.Items.$invalid" style="color:red;">Required</span>
        </td>
        <td>
            <input type="text" ng-model="AmtPrepared" class="form-control input-sm" ng-required="true" numbers-only name="AmtPrepared" ng-style="OnMenuSave && FormAddMenu.AmtPrepared.$invalid && { 'border' : 'solid 1px red' }" maxlength="8" />
            <span ng-show="OnMenuSave && FormAddMenu.$dirty && FormAddMenu.AmtPrepared.$invalid" style="color:red;">Required</span>
        </td>
        <td>
            <input type="text" ng-model="AmtServed" class="form-control input-sm" ng-required="true" numbers-only name="AmtServed" ng-style="OnMenuSave && FormAddMenu.AmtServed.$invalid && { 'border' : 'solid 1px red' }" maxlength="8" />
            <span ng-show="OnMenuSave && FormAddMenu.$dirty && FormAddMenu.AmtServed.$invalid" style="color:red;">Required</span>
        </td>
        <td style="text-align:center; vertical-align:middle;" colspan="2">
            <button type="submit" class="btn btn-primary btn-xs" ng-click="AddMenuSave(FormAddMenu, PortionSize, Items, AmtPrepared, AmtServed, item); OnMenuSave = true; ">
                Save
            </button>
            <button type="submit" class="btn btn-primary btn-xs" ng-click="CancelMenuAdd(FormAddMenu); addModeMenu = false; OnMenuSave = false;">
                Cancel
            </button>
        </td>
    </tr>
    <tr>
        <td style="text-align:right" colspan="8">
            <button type="submit" class="btn btn-primary btn-xs" ng-show="addModeMenu" ng-click="addModeMenu = false; OnMenuSave = false;">
                Add
            </button>
        </td>
    </tr>
</tbody>

$scope.AddMenuSave = function (ngForm, PortionSize, Items, AmtPrepared, AmtServed, formDetail) {
    if (ngForm.$invalid) {
        ngForm.$dirty = true;
        var i = null;
        for (i in ngForm) {
            if (ngForm[i] && ngForm[i].hasOwnProperty && ngForm[i].hasOwnProperty('$dirty')) {
                ngForm[i].$dirty = true;
            }
        }
    }
    else {

        var getData = ngReviewFormService.AddMenuSave(PortionSize, Items, AmtPrepared, AmtServed, formDetail.doc_id);
        getData.then(function (result) {
            formDetail.MenuServedList = result.data.menuList;
                $scope.PortionSize = $scope.Items = $scope.AmtPrepared = $scope.AmtServed = '';
                $scope.addModeMenu = true;
        }, function (error) {
            OpenModal("Error occurred! Please contact system administrator");
        });
    }
};


$scope.CancelMenuAdd = function (ngForm) {
    ngForm.$setPristine();
    ngForm.$setUntouched();
    $scope.PortionSize = $scope.Items = $scope.AmtPrepared = $scope.AmtServed = '';
}

显示/隐藏和重置angularjs

0 个答案: