current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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

share|improve this question
    
Can you show us a little more of your HTML, starting from <table> opening tag? – punund Jul 17 '14 at 21:37
1  
Are these rows being created within ng-repeat? If so is easy due to child scope already created – charlietfl Jul 17 '14 at 21:38
    
Yes through ng-repeat – J. Davidson Jul 17 '14 at 21:39
up vote 1 down vote

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

share|improve this answer
up vote 0 down vote

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.

share|improve this answer
up vote 0 down vote

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">
share|improve this answer
    
you are modifying the data model though, no need to do that. – charlietfl Jul 17 '14 at 21:57
    
sure. fixed it now. – Gabe Jul 17 '14 at 21:59
    
but that fix puts it right back to OP original problem, changing one row changes all – charlietfl Jul 17 '14 at 22:01
    
If that's true, then wouldn't you answer do the same thing? Your directive isn't creating an isolate scope. – Gabe Jul 17 '14 at 22:04
    
but the parent scope of directive is the child scope created by ng-repeat for each repeated element in the array. Then within directive create variables at child scope level – charlietfl Jul 17 '14 at 22:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.