Angularjs toggle between input and span values in a table row

Question

I have following code in my html where I want to toggle input and span fields. In a table row.

<table>
 <tbody ng-repeat="(i, cont) in char.items">
<tr>
    <td>
    <div>
    <a ng-click="choose()">
    <input type="text" ng-model="item.desc" ng-show="sho==1" />
    <span ng-show="sho==0">{{item.type}}</span></a>
    </div>
    </td>
</tr>
</tbody>
</table>
<div  ng-click="addRows(char)" style="WIDTH: 974px">Add Row</div>

In my controller I have

 app.controller("testCtrl", function($scope) {
    $scope.sho=0;

  $scope.addRows = function(char) {
        if (typeof char.items == 'undefined') {
            char.items = [];

        }
        char.items.push({ des: '', type: '', price: '', charge__id: ''});
    };

    $scope.choose= function() {
    //some values are retrieved than I want to toggle so it shows the 
    //want to set sho=1 so input is hidden instead the span vaue is shown 
    $scope.sho=1; 
    };

});

Problem is when I set $scope.sho=1; it shows span value in all the row of the table. While I add a new row I just want to show the input box leaving the other rows already inserted with span values. Pleae let me know how can i set ng-show for each row in table. Thanks

Answer 1

Since ng-repeat creates a child scope for each item you can leverage that within a directive. The parent scope of the directive will be the child scope created by ng-repeat and therefore isolated from other repeaters

Move your choose and sho out of main controller and put them into directive scope.

<div editable>
   <a ng-click="choose()"></a>
   <input type="text" ng-model="item.desc" ng-show="!sho" />
   <span ng-show="sho">{{item.type}}</span>
</div>

app.directive('editable', function () {
    return function (scope, elem, attrs) {
        scope.sho = true;
        scope.choose = function () {
            scope.sho = !scope.sho;
        }
    }
});

This is the simplest version possible without going to isolated scope within the directive and without considering factors like more than one of these editables in a row.

For more insulated feature rich version would consider using a more robust directive like x-editable

Answer 2

I have trouble understanding what your code is actually used for. But my guess would be for you to pass the current item into the choose function and set a flag on the item itself. If you modify your ng-show and ng-hide attributes to react to this flag on each item, I guess you would reach your goal.

 <a ng-click="choose(item)">
   <input type="text" ng-model="item.desc" ng-show="item.sho==1" />
   <span ng-show="item.sho==0">{{item.type}}</span></a>
 </div>

And in your choose function you would do something like this:

$scope.choose= function(item) {
  item.sho=1; 
};

This is only a wild guess though, since it isn't quite clear to me what you are trying to accomplish.

Answer 3

Two things that come to mind immediately are:

1 - Pass in the item with the function and have the function accept an argument.

<a ng-click="choose(sho)">

and then in your controller

$scope.choose= function(sho) {
  sho = 1;
};

2 - Just make ng-click set the value to one..

<a ng-click="sho = 1">