2016-08-02 23 views
0

ich meine html so etwas wie dieses haben,eindeutig ng-bind-html in ng-repeat

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

ich die Editierfunktion wollen Eingabefeld einer bestimmten Zeile hinzufügen die Schaltfläche Bearbeiten gewesen ist geklickt, gibt es irgendeine eckige Art, es zu tun, auch wenn ich möchte, dass das Eingabefeld hinzugefügt wird, um eine eindeutige ID zu haben, damit ich es für die Aktualisierung des bearbeiteten Textes auslösen kann. Ich bin auf der Suche nach der besten Winkelübung, da ich neu bin. Vielen Dank im Voraus :)

Antwort

0

der beste Weg, es zu tun ist, um die Eingabe und zeigen Sie sie mit 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> 

ich adaped das Beispiel von ngShow zu verstecken, damit Sie es mit ngClick zu verwenden:

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

Ein anderer Weg
var input = var element = document.createElement ("input") zu verwenden, wäre;

aber mit ng-Show scheint Ihre Bedürfnisse besser zu erfüllen