how to write function to target specific variable for ng disable that inside ng repeat?

Question

I'm trying to build todo list app in angular. When you add new item, it will add to input box(by default, i set it to disabled) inside the table and also add Edit link next to that input. Once i click on the Edit, the input box will enable. ( i got it working with this code (Edit).

My question is how to replace ng-click="editable=!editable" with ng-click="edit()". I tried to write that Edit function, but i can't get it to work. Please help. My code on jsfiddle

Thanks so much.

<body ng-app="shoppingList">
<div  ng-controller="mainController">
    <h1>My Shopping List</h1>
    <form class="form-inline" ng-submit="addItem()">
        <div class="form-group">
        <input type="text" ng-model="newItem">
        </div>
        <input type="submit" value="Add">   
    </form>
    <div>
        <table>
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Edit</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in items track by $index">
                    <td><input ng-disabled="!editable" type="text" value="{{item}}"></td>
                    <td ng-click="editable=!editable">Edit</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>  
<script>
(function(){
    var app = angular.module('shoppingList',[]);
    app.controller('mainController',function($scope){
        $scope.items=[];
        $scope.addItem = function(){
            $scope.items.push($scope.newItem);
        };

    $scope.edit = function(){
    // i need to move editable=!editable into this function
    // but i don't know how to do that
    }

    });

}());
</script>

Your code [doesn't work](http://importblogkit.com/2015/07/does-not-work/)? — Robert Columbia, Nov 18 '16 at 01:11
@Robert, my code is working fine, but i need to replace ng-click="editable=!editable" with ng-click="edit()", because i need to use that edit() function to add more funtion. Thanks — sopanhanita, Nov 18 '16 at 01:16
Just declare `$scope.editable = true;` like `$scope.items=[];` in the controller. But that is only a simple hack. Should the `editable` be specific to each line/row ? `$scope.editable= !$scope.editable; console.log($scope.editable)` — Searching, Nov 18 '16 at 01:17
`editable=!editable` is just an evaluation that returns a bool. Write that in your edit function as `$scope.editable = !$scope.editable; return $scope.editable;` — Ronnie, Nov 18 '16 at 01:18
@ Searching, yes the editable should be specific to each line/row. I tried with $index, but i can't get it to work. thanks — sopanhanita, Nov 18 '16 at 01:21
@Ronnie, i had tried $scope.editable = !$scope.editable; return $scope.editable; in the function, but the editable need to be specific to each line/row. i think i have to pass $index to that function, but i can't make it work. thanks — sopanhanita, Nov 18 '16 at 01:29

score 1 · Accepted Answer · answered Nov 18 '16 at 01:37

You could save the editable property of the todo item, and then us it like this.

$scope.addItem = function(){
    $scope.items.push({text: $scope.newItem,editable:false});
}; 

$scope.edit = function(item){    
   item.editable = !item.editable; 
   console.log(item)   
}
$scope.save = function(item){
  console.log("saved")     
   item.editable = !item.editable; 
 }

html

<tr ng-repeat="item in items track by $index">
 <td><input ng-disabled="!item.editable" ng-blur="save(item)" type="text" value="{{item.text}}"></td>
<td ng-click="edit(item)">Edit</td>
</tr>

I think this is simplest one, but there is always a better approach. Let us know. What is ngBlur

it's working like a charm. https://jsfiddle.net/sopanhanita/d8ke1jjk/9/ Thanks so much @Searching. i will learn from it. — sopanhanita, Nov 18 '16 at 01:49

how to write function to target specific variable for ng disable that inside ng repeat?

1 Answers1