javascript - ngrepeat Edit in line with form -

i trying allow renaming of item in line. aware of using $scope.editmode etc, realized when use ng-repeats getting of entries in list edditable rather specific index. here have in html:

      <li ng-repeat="playlist in myplaylist">          <a href="" data-ng-hide="editplaylist">{{playlist.name}}</a>            <form data-ng-show="editplaylist" data-ng-submit="renameplaylist()">             <input data-ng-model="editableplaylistname">               </form>       </li> 

my controller uses context menu setting so:

 $scope.editplaylist =false;   $scope.menuoptions = [ ['rename', function ($itemscope) {     $scope.editplaylist = true;     $scope.editableplaylistname = $itemscope.playlist.name; }] 

etc. when want rename, setting hide , shows true/false accordingly, issue of items in list true resulting number of input fields each item. how go around show input field corresponding $index of list? followed similar post angularjs inline edit inside of ng-repeat, wasn't able identify why theirs able show input field corresponding $index. image shown below:

thanks,

one way set 'edit' flag on each repeatable item.

markup:

<li ng-repeat="playlist in myplaylist">   <a data-ng-hide="playlist.iseditmode" ng-click="playlist.iseditmode=true">     {{playlist.name}}   </a>   <form data-ng-show="playlist.iseditmode" data-ng-submit="renameplaylist()">     <input data-ng-model="playlist.name">   </form> </li> 

i'm not sure understand controller code does, here's might like:

$scope.myplaylist = [...]; $scope.renameplaylist = function() {   //do whatever rename play list    this.playlist.iseditmode = false; }; 

here's plnkr , hope helps.