如何使用contenteditable =" true"编辑数据

时间:2015-11-09 07:24:55

标签: javascript jquery angularjs html5

我已经在angularjs中编写了代码。

我使用controller和ng-bind将数据添加到表中。但是当我试图内联编辑当前数据时,它不会在控制器中更新。

 <div ng-controller="networkingSetupController">
        <div class="col-md-6"> 
            <label for="httpServer">HTTP Server : </label>
            <div class="input-group">
                <input type="text" class="form-control" id="addHttpServer" ng-model="addServerNames" />
                <div class="input-group-btn setPadding">
                    <button type="button" class="btn btn-primary btn-md pull-right" ng-click="addHTTPServer()">Add</button>
                </div>
            </div>
            <div class="col-md-12 tableWrapper">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>HTTP Server Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="serverName in serverData track by $index">
                            <td ng-bind = "serverName" contenteditable="true"> </td>

                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

控制器代码: -

 var app = angular.module('myapp', [])

        app.controller('networkingSetupController', function ($scope) {
            $scope.serverData = [];
            $scope.addHTTPServer = function () {
                console.log($scope.addServerNames);
                $scope.serverData.push($scope.addServerNames);
            }
        });

提前完成

Plunker网址: - http://plnkr.co/edit/gW4xp6QTmVU1fDCoFQMQ?p=preview

0 个答案:

没有答案