在 ng-repeat 中唯一的 ng-bind-html

Question

我有我的 html 类似的东西，

<div ng-controller='gridDataController as gridDataCtrl'>
<table>
    <tbody>
        <tr ng-repeat="row in gridData" id="{{row.record_no}}">
            <td ng-bind-html="editInputA">{{row.a}}</td>
            <td ng-bind-html="editInputB">{{row.b}}</td>
            <td>
                <div>
                    <button ng-click="edit(row.record_no)" >edit</button>
                    <button ng-click="update(row.record_no)" >update</button>
                    <button ng-click="delete(row.record_no)" >delete</button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

我想要编辑功能将输入框添加到特定行点击编辑按钮，有什么方法可以做到吗angular，虽然我希望添加的输入框有一个唯一的 id，所以我可以触发它来更新编辑的文本。我正在寻找最佳 angular 练习，因为我是新手。提前致谢:)

Answer 1

最好的方法是隐藏输入并使用 ngShow 显示它 (https://docs.angularjs.org/api/ng/directive/ngShow)

<body ng-app="ngAnimate">
    <button ng-click="showInput= !showInput" >edit</button>
    <div>
        <div class="check-element animate-show" ng-show="showInput">
        <input class="glyphicon glyphicon-thumbs-up" id="newInput">
        </div>
    </div>
</body>

我改编了 ngShow 中的示例，以便您将其与 ngClick 一起使用：

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

另一种方法是使用
变量输入 = 变量元素 = document.createElement("input");

但使用 ng-show 似乎更能满足您的需求

在 ng-repeat 中唯一的 ng-bind-html

uniquely ng-bind-html in ng-repeat

angularjs

angularjs-ng-repeat

ng-bind-html