如何在angularjs中单击按钮时显示文本框代替表格中列中的文本答案

【问题标题】：How to display a textbox in place of text in a column in a table on button-click in angularjs如何在angularjs中单击按钮时显示文本框代替表格中列中的文本
【发布时间】：2017-01-27 22:17:09
【问题描述】：

我正在尝试创建一个小的 Angular 和 php 应用程序。我想显示表格并能够通过单击按钮显示文本框代替旧文本来对其进行编辑。你能帮我做同样的事情吗？提前致谢

这是我的控制器

angular.module('directiveModule').controller('HomeController',['fetchServerData',function (fetchServerData) {

var ctrl = this;

ctrl.stateVal =  false;

ctrl.getTableData = function () {
    fetchServerData.getStudentsData()
        .then(
            function (response) {
                ctrl.tableData =response.data;
            },
            function (response) {
                console.log(response);
            }
        )
};

ctrl.init = function () {
    ctrl.getTableData();
};

ctrl.init();

ctrl.editPrice = function () {
    ctrl.stateVal = true;
};

}]);

这是控制器html

 <table class="table table-striped">
    <thead>
        <tr>
            <th>Flowers</th>
            <th>Price</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody ng-repeat="flower in home.tableData">
    <tr>
        <td>{{flower.name}}</td>
        <td click-to-edit price="flower.price" stateVal="home.stateVal"></td>
        <td><button><span class="glyphicon glyphicon-pencil" title="Edit Price" ng-click="home.editPrice()"></span></button></td>
    </tr>
    </tbody>
</table>

我正在使用指令来实现替换

angular.module('directiveModule').directive('clickToEdit',[function () {
    return{
        scope: {
            price : '=',
            stateVal : '='
        },
        templateUrl: 'templates/directiveTemplates/clickToEdit.html',
        restrict : 'EA',
        link: function (scope, elem, attrs) {
            scope.edit = scope.stateVal;
        }
    }
}]);

指令html

<div>
    <span ng-hide="edit">
        {{price}}
    </span>
    <div ng-show="edit">
        <input class="inputText" type="text"/>
        <div class="glyphicon glyphicon-ok"  ng-click="save()"></div>
        <div class="glyphicon glyphicon-remove" ng-click="cancel()"></div>

    </div>
</div>

这是我的代码，但文本框不会出现在编辑铅笔的 ng-click 上

最后这是我的 json 响应

[{"name":"Lilies","price":200},{"name":"Carnations","price":200},{"name":"Roses","price":200},{"name":"Orchids","price":200},{"name":"Tulips","price":200}]

请帮我搞定

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

您的代码中需要更正以下观察结果

属性名称stateVal应该是state-val
a) 如果您希望scope.edit 在click 发生时生效，您应该留意您的scope.stateVal。

或者

b) 您可以在clickToEdit.html 中使用ng-hide="stateVal" 而不是ng-hide="edit"。
按钮的点击事件应该用flower变量调用，以便隔离行的每个edit



<button ng-click="home.editPrice(flower)"><span class="glyphicon glyphicon-pencil" title="Edit Price">Edit</span></button>

/* Controller */

ctrl.editPrice = function (flower) { flower.stateVal = true; };

您可以在以下 URL 中找到经过上述更改的工作代码

Click here

或者

https://plnkr.co/edit/ve6AAewoKAtuUHWczaDG?p=preview

【讨论】：

【解决方案2】：

你有错误：

<td click-to-edit price="flower.price" stateVal="home.stateVal"></td>

属性必须由小写字母加上 -（蛇形大小写）：

 <td click-to-edit price="flower.price" state-val="home.stateVal"></td>

stateVal -> state-val

【讨论】：