Question

我正在尝试创建一个小角度和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>

所以这是我的代码，但文字框不会出现在编辑铅笔的上

最后这是我的json回复

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

请帮助我让它发挥作用

Answer 1

您输入错误：

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

属性必须用小写字母表示 - （蛇案例）：

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

stateVal - ＆gt;状态-VAL

Answer 2

以下观察结果需要在您的代码中予以纠正

属性名称stateVal应为state-val
a）如果scope.stateVal scope.edit发生click，您应该对ng-hide="stateVal"进行监视。

或者

b）您可以clickToEdit.html使用ng-hide="edit"代替flower。
应使用edit变量调用按钮的click事件，以隔离行的每个

<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; };

git rev-parse --short HEAD

您可以通过以下网址

Click here

或者

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

如何在按钮单击angularjs中显示文本框以代替表中列中的文本

2 个答案: