使用angularJs在动态创建的html表中创建空行

时间:2017-09-01 08:03:40

标签: angularjs asp.net-core-mvc

我在我的表中添加了一个空行,它是通过使用angular-JS传递json对象而动态创建的。

我无法在表格中添加空白行。空白json行未与现有json对象/数组正确连接。

如何在动态创建表上添加新的空白行。代码如下。

这是我的代码:

//--CRUD.cshtml--//
<div ng-controller="crudController">
<div class="row">        
    <div class="col-lg-12 col-md-12 col-xs-12">
    <table  class="table table-condensed">
        <thead>
            <tr>
                <th>S.No.</th>
                <th ng-repeat="key in keys" ng-if="key!='UID'">{{key}}</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody ng-init="GetDataForCrud()">
            <tr ng-repeat="data in datas" ng-include="getTeamplate(data)">
            </tr>
        </tbody>
    </table>
    <input type="submit" class="btn btn-primary btn-xs addnew pull-right" value="Add New" ng-click="AddNewRow()">
    </div>
</div>

//--CRUDDisplay.cshtml--//
<td>{{$index + 1}}</td>

                    <td ng-repeat="cell in data" ng-if="$index>0">{{cell}}</td>
                    <td><button type="button" class="btn btn-warning btn-xs" ng-click="Edit(data)">Edit</button></td>
                    <td><button type="button" class="btn btn-danger btn-xs" ng-click="Delete(data)">Delete</button></td>


//--CRUDEdit.cshtml--//
<td>{{$index + 1}}</td>
<td ng-repeat="cell in data" ng-if="$index>0"><input type="text" ng-model="cell" class="form-control input-sm"/></td>
                    <td><button type="button" class="btn btn-warning btn-xs" ng-click="Update(data)">Update</button></td>
                    <td><button type="button" class="btn btn-danger btn-xs" ng-click="Reset()">Reset</button></td> 


//--CRUDController.js--//
app.controller('crudController', function ($scope, $http, $compile) {

$scope.selectedMediaData = {};
$scope.datas = [];
var KeyNames = [];
$scope.GetDataForCrud = function () {
    $http({
        method: "get",
        url: "/Home/GetMediaPageDataForCrud",
        datatype: "json"
    }).then(function (response) {
        var jData = JSON.parse(response.data);
        var d = jData.ResultData;
        if (d.length > 0) {
            var keys = d[0];
            for (var key in keys) {
                KeyNames.push(key);
            }
        }
        $scope.keys = KeyNames;
        $scope.datas = jData.ResultData;
    }, function () {

    })
};

$scope.Edit = function (data) {
    $scope.selectedMediaData = angular.copy(data);
};

$scope.getTeamplate = function (data) {
    if (data.UID === $scope.selectedMediaData.UID)
    { return 'Edit'; }
    else
    { return 'Display'; }
};

$scope.AddNewRow = function () {
    var blankRow = '';
    for (key in KeyNames) {
        blankRow += KeyNames[key] + ":" + "\"\",";
    }
    $scope.datas.push({blankRow});
    console.log($scope.datas);
}


})

1 个答案:

答案 0 :(得分:0)

像这样添加新行:

$scope.AddNewRow = function () {
    var duplicateRow = {};
    duplicateRow = angular.copy($scope.datas[0]);
    for(v in duplicateRow){duplicateRow[v]="";}
    $scope.datas.push(duplicateRow);
};