Question

我正在页面上，我将值输入到文本框中，然后单击“保存”按钮，它们将保存在UI网格中。该表甚至包含编辑按钮。在单击编辑按钮时，表格中的字段应该是可编辑的，并且在点击更新按钮时应该保存更改并且不能修改。我已经尝试了一些东西，但我没有得到更新按钮的正确输出。代码在jsfiddle上添加。这是链接https://jsfiddle.net/a8n1d01q/

HTML code：

<!DOCTYPE html>
<html>

<head>
    <title>Header Details</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

    <link href="font.css" rel="stylesheet" />

    <script src="header.js"></script>
</head>

<body>

    <div class="container" ng-app="myApp" ng-controller="headerCtrl">
        <h2 style="text-align: center"><b>Header Details</b></h2>

        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <!--<div class="panel-heading">
                            <h4 class="panel-title" style="text-align: center">


                                <a>Add the Headers </a>
                            </h4>
                        </div>-->

                <div class="panel-body">

                    <div class="row">

                        <div class="input-group">
                            <h1>
                                &nbsp; <b>Enter the Header:</b>&nbsp;
                                <input type="text" name="Header" ng-model="header"><br>
                            </h1>
                        </div>


                    </div>
                    <p>

                    </p>

                    <div class="row">

                        <div class="input-group">
                            <h1>
                                &nbsp;  <b>Status:</b>&nbsp;
                                <select name="status" id="status" ng-model="status">
                                    <option value="" selected="selected">(Select the status)</option>
                                    <option value="Active">Active</option>
                                    <option value="Inactive">Inactive</option>

                                </select>
                            </h1>
                        </div>

                    </div>

                    <div class="pull-right">

                        <button type="submit" class="btn btn-primary" ng-click="Save()">Save</button>

                        <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>

                    </div>






                </div>
            </div>




            <table class="table table-bordered" ;style="width:40%;margin-left:400px">
                <tr>
                    <th>Header</th>
                    <th>Status</th>

                </tr>
                <tr ng-repeat="data in headerData.Result">
                    <td><input type="text" input-disabled="editableInput" value={{data.Header}} ></td>
                    <td><input type="text" input-disabled="editableInput" value={{data.Status}} ></td>
                    <td>
                        <!--<button class="editbtn">edit</button>-->

                        <button ng-click="editableInput = !editableInput">
                            <span ng-show="editableInput">UPDATE</span>
                            <span ng-show="!editableInput">EDIT</span>
                        </button>
                        <button class="editbtn">delete</button>
                    </td>
                </tr>


            </table>

        </div>
    </div>
</body>
</html>

Angular JS代码：

var app = angular.module('myApp', []);
app.controller('headerCtrl', function ($scope) {
    $scope.headerData = {};
    $scope.headerData.Result = [];
    $scope.Save = function () {
        $scope.headerData.Result.push({
            "Header": $scope.header,
            "Status": $scope.status

        });

    };

    $scope.clear = function() {
        console.log($scope.header);
        console.log($scope.status);
        $scope.header = "";
        $scope.status = "";


    };

    $scope.editableInput = false;
    app.directive("inputDisabled", function () {
        return function (scope, element, attrs) {
            scope.$watch(attrs.inputDisabled, function (val) {
                if (val)
                    element.removeAttr("disabled");
                else
                    element.attr("disabled", "disabled");
            });
        }
    });

});

编辑/更新按钮功能

0 个答案: