MVC Angular避免手动序列化CRUD操作

时间:2018-03-18 08:39:52

标签: angularjs asp.net-mvc

场景:来自我自定义的web的MVC项目,客户端上的Angular,用于序列化模型中的范围数据,当我想做CRUD操作时,我使用临时虚拟模型和写作它(用于保存用户和更新取消前的更改前)。

目标:不使用虚拟对象(需要我创建手动序列化)。

有优雅的方法吗?

代码:

查看

if ($scope.form.editItemProfitCenterForm.profitCenters[element.name]) {
   if (total <= $scope.currentItem.monday0) {
      $scope.form.editItemProfitCenterForm.profitCenters[element.name].$setValidity("total", true);
   } else {
      $scope.form.editItemProfitCenterForm.profitCenters[element.name].$setValidity("total", false);
   }
}

角:

<div ng-app="demoModule" id="body">
<div ng-controller="demoCtrl">
    <h2>AngularJS CRUD Operations with MVC5 WebAPI</h2>

    <h3>List of Products</h3>

    <table ng-cloak>
        <thead>
            <tr>
                <th style="display: none;">ID</th>
                <th>Name</th>
                <th>Category</th>
                <th>Price</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="items in productsData">
                <td hidden="hidden">{{items.Id}}</td>
                <td>
                <span ng-show="!items.EditMode">{{items.Name}}</span>
                    <input type="text" ng-show="items.EditMode" data-ng-model="Product.Name" />
                </td>
                <td>
                    <span ng-show="!items.EditMode">{{items.Category}}</span>
                    <input type="text" ng-show="items.EditMode" data-ng-model="Product.Category" />
                </td>
                <td>
                    <span ng-show="!items.EditMode">{{items.Price | currency:'&#8377;':2}}</span>
                    <input type="text" ng-show="items.EditMode" data-ng-model="Product.Price" />
                </td>

                <td></td>
                <td>
                    @*<button ng-show="!user.EditMode" ng-model="$scope.Product" ng-click="edit(productsData[$index])">Edit</button>*@
                    <button ng-show="!items.EditMode" ng-model="$scope.Product" ng-click="edit($index)">Edit</button>
                    <button ng-show="items.EditMode" ng-model="$scope.Product" data-ng-click="update()">Update</button>
                    <button ng-show="items.EditMode" ng-model="$scope.Product" data-ng-click="cancel($index)">Cancel</button>
                    <button ng-show="!items.EditMode" ng-click="delete($index)">Delete</button>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6">
                    <hr />
                </td>
            </tr>
            <tr>
                <td>Total :</td>
                <td></td>
                <td><label ng-bind="total() | currency:'&#8377;':2"></label></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
    <br />
    <div style="border-top: solid 2px #282828; width: 430px; height: 10px"> </div>

0 个答案:

没有答案