Monday, 8 May 2017

Set textbox value to true if any column is edited

I using angularjs.

let me explain my scenario.

I am using html table it has inline edit, if any of column is edited that selected column is changed into green color.

I want to set the value to true in textbox if any of the textbox is edited.

i tried but that is set into all the textbox as true. I want to set as true for the edit row textbox can anyone give me a solution.

Html Table

 <table class="table table-striped table-bordered table-list">
                                                        <thead>
                                                            <tr>
                                                                <th style="width: 25%" align="center">
                                                                    <a href="" ng-click="orderByField='RoleName'; reverseSort = !reverseSort">Name</a>
                                                                </th>
                                                                <th style="width: 35%">
                                                                    <a href="" ng-click="orderByField='Description'; reverseSort = !reverseSort">Description</a>
                                                                </th>
                                                                <th style="width: 30% " align="center">
                                                                    <a href="" ng-click="orderByField='IsActive'; reverseSort = !reverseSort">IsActive?</a>
                                                                </th>
                                                                <th style="width: 10% " align="center"><a href="" ng-click="orderByField='IsActive'; reverseSort = !reverseSort">Assign UI List</a></th>
                                                                <th style="width: 1%" align="center" ng-show="false">DirtyFlag</th>
                                                            </tr>
                                                        </thead>
                                                        <!--<div>-->
                                                        <tbody>

                                                            <tr>
                                                                <td>
                                                                    <input type="text" id="RoleNameID" ng-model="Manage_Role1.RoleName" placeholder="search" class="searchbox" onkeydown="return (event.keyCode!=13);" />
                                                                </td>
                                                                <td>
                                                                    <input type="text" id="DescriptionID" ng-model="Manage_Role1.Description" placeholder="search" class="searchbox" onkeydown="return (event.keyCode!=13);"/>
                                                                </td>
                                                                <td>
                                                                    <input type="text" id="IsActiveID" ng-model="Manage_Role1.IsActive" placeholder="search" class="searchbox" onkeydown="return (event.keyCode!=13);"/>
                                                                </td>
                                                                <td></td>
                                                            </tr>

                                                            <tr dir-paginate="Manage_Role in Manage_Roleser | orderBy:'_id':'Desc' | itemsPerPage:8 | filter:Manage_Role1 | orderBy:orderByField:reverseSort " ng-class-odd="'odd'">
                                                                <td ng-click="tableform1.$show()">
                                                                    <span e-ng-change="applyHighlight($data,$index)" editable-text="Manage_Role.RoleName" ng-attr-title=""
                                                                          e-form="rowform" ng-click="rowform.$show()">
                                                                        
                                                                    </span>
                                                                </td>
                                                                <td ng-click="tableform1.$show()">
                                                                    <div>
                                                                        <span e-ng-change="applyHighlight($data,$index)" editable-text="Manage_Role.Description" e-form="rowform"  ng-attr-title=""
                                                                              ng-click="rowform.$show()">
                                                                            
                                                                        </span>
                                                                    </div>
                                                                </td>
                                                                <td ng-click="tableform1.$show()" align="center">
                                                                    <span e-ng-change="applyHighlight($data,$index)" ng-checked="Manage_Role.IsActive"
                                                                          editable-checkbox="Manage_Role.IsActive" e-form="rowform" ng-click="tableform.$show()">
                                                                        <input type="checkbox" ng-model="Manage_Role.IsActive" width="20" ng-attr-title="" />
                                                                    </span>
                                                                </td>
                                                                <td align="center">
                                                                    <input type="image" data-toggle="modal" ng-click="Rolepopupclick(Manage_Role._id)" title="Assign UI"
                                                                           data-target="#Div1" src="App_Themes/Images/AssignUser.png" alt="Submit" width="28" height="28" />
                                                                </td>

                                                                <td>
                                                                    <input type="text" value= />
                                                                </td>
                                                            </tr>

                                                        </tbody>
                                                </table>

I have write the code in ng-change event.

in my controller

ng-change code

 $scope.applyHighlight = function ($data,index) {       
 var dataSpan = $(event.currentTarget).closest('td');
        if (!dataSpan.hasClass("highlighted")) {
            $(dataSpan).addClass("highlighted"); //this is set into green color
            $scope.settrue = "true";
        }
    }

I want to set as true for only edited row textbox..



via Vinoth

No comments:

Post a Comment