angular js code to disable buttons in form

Question

We have a UIform (angular js) which has Edit button in each row. Edit button has a condition that only one row can be edited at a time. I need to insert another button at top to disable edit button in all the rows. Please assist.

Current code: btn ng-disable = disableedit ng-click form-edit > button < /btn

disableedit function disables all edit button except for current row which is being edited. Please assist what should be the code for the new EditDisable button.

Answer 1

As i understand you want to enable edit button only when the user is hovering at that row. Here is my attempt to achieve the same. You can use ng-mouseenter and ng-mouseout events to trigger functions.

• mouseenter : The event occurs when the pointer is moved onto an element.

• mouseout : The event occurs when a user moves the mouse pointer out of an element, or out of one of its children

  <div ng-app="myApp" ng-controller="MainCtrl">
    <div class="mb-20" ng-repeat="row in rows" ng-mouseenter="rowid=$index+1">
      <span>{{$index+1}}</span>
      <span>{{row.value}}</span>
      <span>
       <button ng-disabled="rowid!=$index+1" ng-mouseout="rowid=0">edit</button>
      </span>
    </div>
  </div>
  

So , basically check if your row_id is equal to the current index enable the button else let it be disabled.

Here's the jsfiddle link : http://jsfiddle.net/khushboo097/ohvqjdye/