CODEWITHSUNDEEP
javascripthtmlangularjs
kritika verma
kritika verma

Reputation: 47

Made all the fields editable on click with angularJS

Here is the HTML, in which there is ng-repeat with which the list is fetched, and ng-readonly which has been freezed initially, and in JS on click funtion its released 

<tr ng-repeat= "employeeDetail in employeeDetails">
                    <div ng-readonly="isReadonly">
                      <td><a><span>{{employeeDetail.empName}}</a></td>
                      <td>
                        <div ng-if="employeeDetail.departmentName">
                            {{employeeDetail.departmentName}}
                        </div>
                        <div ng-if="!employeeDetail.departmentName">
                            Not Specified
                        </div>
                        </td>
                      <td>
                        {{employeeDetail.empEmail}}
                      </td>
                      <td>{{employeeDetail.empContact}}</td>
                      <td>
                            <i class="fa fa-edit" ng-click="updateEmp()">
                      </td>
                    </div>
                  </tr>

And here is the JS file, attached to it, what I want is to make all the fields editable on click,

$scope.isReadonly = false;
        $scope.addEmployeeType = function(){
            var employeeDetail = new employeeDetailApi();
            $scope.employeeDetails = employeeDetail.list;
        }
        $scope.updateEmp =  function (){
            $scope.isReadonly = true;
            console.log("update Employee");
        }

Upvotes: 1

Views: 653

Answers (2)

Pradip Talaviya
Pradip Talaviya

Reputation: 409

try it...

<tr ng-repeat= "employeeDetail in employeeDetails">
    <div ng-click="isReadonly==true">
        <td><input type="text" ng-value="employeeDetail.empName" ng-readonly="isReadonly"></td>
        <td><input type="text" ng-value="employeeDetail.departmentName" ng-readonly="isReadonly"></td>
        <td><input type="text" ng-value="employeeDetail.empEmail" ng-readonly="isReadonly"></td>
        <td><input type="text" ng-value="employeeDetail.empContact" ng-readonly="isReadonly"></td>
        <td>
            <i class="fa fa-edit" ng-click="updateEmp()">
        </td>
    </div>
</tr>

Upvotes: 1

Tushar Walzade
Tushar Walzade

Reputation: 3809

Just update your HTML as - 

<div ng-readonly="isReadonly" ng-click="!isReadonly">

That's it!

Upvotes: 1

Related Questions