I created a table with two input boxes, and by utilizing ng-repeat I have looped through the values:
<tr ng-repeat = "row in allRows" >
<td>
<input type="text" ng-model="row.name" ng-readonly="toogleRN && $first"/>
</td>
<td>
<input type="number" ng-model="row.age" ng-readonly="toogleRN && $first"/>
</td>
<td>
<a role="button" class="btn btn-sm btn-default "
data-ng-click="toogleIt()" data-ng-show="$first"><span class="glyphicon glyphicon-search"> Edit</span>
</a>
</td>
</tr>
</table>
Here is my controller code:
var app = angular.module("TableDemo",[]);
app.controller('TableController',['$scope',function($scope){
$scope.toogleRN=true;
$scope.toogleIt= function()
{
$scope.toogleRN = !$scope.toogleRN;
console.log($scope.toogleRN);
};
$scope.allRows=[{name:'Name_1',age:25},
{name:'Name_2',age:28},
{name:'Name_3',age:17},
{name:'Name_4',age:25},
{name:'Name_5',age:26}];
}]);
In order to fulfill the requirement of making the first row read-only by default and editable upon clicking the "Edit" button, I wonder how I can transfer the
ng-readonly="toogleRN && $first"