CODEWITHSUNDEEP
angularjs
Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

How to modify row content in angular js?

HI i Learning Angular js and i have created a project.

All most i have do but i m face one problum .

My Data is repeat throw tr and i have inline editable option Type, Description, Priority

if i have click in both link than show to editable mode but show all i want to show only one how to do this

HTML Code

 <body ng-app="myApp" ng-controller="myCtrl">
    <table class="table ">
      <tbody>
        <tr class="list-row" ng-repeat="form in todoData">
          <td class="list-row-content">


              <p>
                <a>{{form.title}}</a>
              </p>

             <span>
             Type:                   <a ng-show="!typeAction" ng-click="selectTypeAction($index)">{{selectedAction.label}}</a>
                  <select ng-change="changeTypeAction()" ng-show="typeAction" ng-model="selectedAction" ng-options="opt as opt.label for opt in options"></select>
                </span>


                <span class="tag-sec"> 
              Description:                   <a ng-show="!typeDescAction" ng-click="desTypeAction($index)">{{desType}}</a>
                  <input type="text" value="" ng-show="typeDescAction" ng-model="desType" ng-blur="changeDesAction($index)" />
                </span>

                <span class="tag-sec">
             Priority:                   <a ng-show="!typePriAction" ng-click="priTypeAction($index)">{{priAction.label}}</a>
                  <select ng-change="changePriTypeAction()" ng-show="typePriAction" ng-model="priAction" ng-options="opt as opt.label for opt in priOptions"></select>
                </span>

          </td>
        </tr>
      </tbody>
    </table>
  </body>

Angular jS code 

   var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){

    /* ************************************************ */
        $scope.todoData = [
            {'title':'Create Google Logo'},
            {'title':'Talk to XYZ about Google'},
            {'title':'Testing Google Coding'},
            {'title':'Create Documentaion about Google'},
            {'title':'Create Client Sample form'},
            {'title':'Modify Top Navigation'},
            {'title':'Change Footer text and color'},
            {'title':'Redesign Google Dashboard'}
          ]


        $scope.options = [
          { label: 'Action Item', value: 1 },
          { label: 'Defect', value: 2 },
          { label: 'Meeting Invite', value: 3 },
          { label: 'Issue', value: 4 },
          { label: 'Enhancement', value: 5 },
          { label: 'Risk', value: 6 },
          { label: 'Proposal', value: 7 }
        ];
        $scope.selectedAction =$scope.options[1];
        $scope.selectTypeAction = function(index){
          console.log(index);
          $scope.typeAction = true;
        };
        $scope.changeTypeAction = function(){
          $scope.typeAction = false;
        }

        $scope.desType = 'Google logo needs a new concept';
        $scope.desTypeAction = function(idx){
          $scope.typeDescAction = true;
        }
        $scope.changeDesAction = function(idx){
          $scope.typeDescAction = false;
        }

        $scope.priOptions = [
          { label: 'High', value: 1 },
          { label: 'Medium', value: 2 },
          { label: 'Low', value: 3 }
        ];
        $scope.priAction =$scope.priOptions[1];
        $scope.priTypeAction = function(index){
          console.log(index);
          $scope.typePriAction = true;
        };
        $scope.changePriTypeAction = function(){
          $scope.typePriAction = false;
        }
        /* ************************************************ */
});

[Plunker URL][1]

Plunker Link

Upvotes: 2

Views: 81

Answers (4)

anupam kumar
anupam kumar

Reputation: 59

Try this Way go by index by index not as global scope 

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){

    /* ************************************************ */
        $scope.todoData = [
            {'title':'Create google Logo','discription':'google logo needs a new concept'},
            {'title':'Talk to Sandeep about google','discription':'google logo needs a new concept'},
            {'title':'Testing google Coding','discription':'google logo needs a new concept'},
            {'title':'Create Documentaion about google','discription':'google logo needs a new concept'},
            {'title':'Create Client Sample form','discription':'google logo needs a new concept'},
            {'title':'Modify Top Navigation','discription':'google logo needs a new concept'},
            {'title':'Change Footer text and color','discription':'google logo needs a new concept'},
            {'title':'Redesign google Dashboard','discription':'google logo needs a new concept'}
          ]


        $scope.options = [
          { label: 'Action Item', value: 1 },
          { label: 'Defect', value: 2 },
          { label: 'Meeting Invite', value: 3 },
          { label: 'Issue', value: 4 },
          { label: 'Enhancement', value: 5 },
          { label: 'Risk', value: 6 },
          { label: 'Proposal', value: 7 }
        ];

        $scope.selectedAction =$scope.options[1];


        $scope.selectTypeAction = function(index){ 
          $scope.todoData[index].typeAction = true;
        }; 

        $scope.changeTypeAction = function(index){       
         $scope.todoData[index].typeAction = false;
        }


        $scope.desTypeAction = function(idx){
        $scope.todoData[idx].typeDescAction = true;
        }
        $scope.changeDesAction = function(idx){
       $scope.todoData[idx].typeDescAction  = false;
        }

        $scope.priOptions = [
          { label: 'High', value: 1 },
          { label: 'Medium', value: 2 },
          { label: 'Low', value: 3 }
        ];
        $scope.priAction = $scope.priOptions[1];

        $scope.priTypeAction = function(index){ 
         $scope.todoData[index].typePriAction = true;
        };
        $scope.changePriTypeAction = function(index){
          $scope.todoData[index].typePriAction= false;
        }
        /* ************************************************ */
});

HTML CODE

 <tr   ng-repeat="form in todoData">

        <td > 



              <p><a>{{form.title}}</a></p>






            <span class="tag-sec">
             Type: <a ng-show="!form.typeAction" ng-click="selectTypeAction($index)">{{selectedAction.label}}</a>
             <select ng-change="changeTypeAction($index)" ng-show="form.typeAction" ng-model="selectedAction" ng-options="opt as opt.label for opt in options"></select>
            </span> 
            <span class="tag-sec"> 
              Description: <a ng-show="!form.typeDescAction" ng-click="desTypeAction($index)">{{form.discription}}</a>
              <input type="text"   ng-show="form.typeDescAction" ng-model="form.discription" ng-blur="changeDesAction($index)" />
            </span>
            <span class="tag-sec">
             Priority: <a ng-show="!form.typePriAction" ng-click="priTypeAction($index)">{{priAction.label}}</a>
             <select ng-change="changePriTypeAction($index)" ng-show="form.typePriAction" ng-model="priAction" ng-options="opt as opt.label for opt in priOptions"></select>
            </span>

        </td>
      </tr>

Plunker Demo URL

Upvotes: 1

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38693

Use "This" object

Past this HTML COde

 <!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <table class="table ">
      <tbody>
        <tr class="list-row" ng-repeat="form in todoData">
          <td class="list-row-content">


              <p>
                <a>{{form.title}}</a>
              </p>

             <span>
             Type:                   <a ng-show="!typeAction" ng-click="selectTypeAction($index,this)">{{selectedAction.label}}</a>
                  <select ng-change="changeTypeAction(this)" ng-show="typeAction" ng-model="selectedAction" ng-options="opt as opt.label for opt in options"></select>
                </span>


                <span class="tag-sec"> 
              Description:                   <a ng-show="!typeDescAction" ng-click="desTypeAction($index,this)">{{desType}}</a>
                  <input type="text" value="" ng-show="typeDescAction" ng-model="desType" ng-blur="changeDesAction($index,this)" />
                </span>

                <span class="tag-sec">
             Priority:                   <a ng-show="!typePriAction" ng-click="priTypeAction($index,this)">{{priAction.label}}</a>
                  <select ng-change="changePriTypeAction(this)" ng-show="typePriAction" ng-model="priAction" ng-options="opt as opt.label for opt in priOptions"></select>
                </span>

          </td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

Past this js code

  var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {

    /* ************************************************ */
    $scope.todoData = [
        { 'title': 'Create Google Logo' },
        { 'title': 'Talk to XYZ about Google' },
        { 'title': 'Testing Google Coding' },
        { 'title': 'Create Documentaion about Google' },
        { 'title': 'Create Client Sample form' },
        { 'title': 'Modify Top Navigation' },
        { 'title': 'Change Footer text and color' },
        { 'title': 'Redesign Google Dashboard' }
    ]


    $scope.options = [
      { label: 'Action Item', value: 1 },
      { label: 'Defect', value: 2 },
      { label: 'Meeting Invite', value: 3 },
      { label: 'Issue', value: 4 },
      { label: 'Enhancement', value: 5 },
      { label: 'Risk', value: 6 },
      { label: 'Proposal', value: 7 }
    ];
    $scope.selectedAction = $scope.options[1];
    $scope.selectTypeAction = function (index, objVal) {
        console.log(index);
        objVal.typeAction = true;
    };
    $scope.changeTypeAction = function (objVal) {
        objVal.typeAction = false;
    }

    $scope.desType = 'Google logo needs a new concept';
    $scope.desTypeAction = function (idx, objVal) {
        objVal.typeDescAction = true;
    }
    $scope.changeDesAction = function (idx, objVal) {
        objVal.typeDescAction = false;
    }

    $scope.priOptions = [
      { label: 'High', value: 1 },
      { label: 'Medium', value: 2 },
      { label: 'Low', value: 3 }
    ];
    $scope.priAction = $scope.priOptions[1];
    $scope.priTypeAction = function (index, objVal) {
        console.log(index);
        objVal.typePriAction = true;
    };
    $scope.changePriTypeAction = function (objVal) {
        objVal.typePriAction = false;
    }
    /* ************************************************ */
});

Working Demo

enter image description here

Upvotes: 1

squiroid
squiroid

Reputation: 14037

I have the simple one catch the context (using 'this') of the particular element and set the local variable of ng -repeat typeAction.

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <table class="table ">
      <tbody>
        <tr class="list-row" ng-repeat="form in todoData">
          <td class="list-row-content">


              <p>
                <a>{{form.title}}</a>
              </p>

             <span>
             Type:                   <a ng-show="!typeAction" ng-click="selectTypeAction($index,this)">{{selectedAction.label}}</a>
                  <select ng-change="changeTypeAction(this)" ng-show="typeAction" ng-model="selectedAction" ng-options="opt as opt.label for opt in options"></select>
                </span>


                <span class="tag-sec"> 
              Description:                   <a ng-show="!typeDescAction" ng-click="desTypeAction($index,this)">{{desType}}</a>
                  <input type="text" value="" ng-show="typeDescAction" ng-model="desType" ng-blur="changeDesAction($index,this)" />
                </span>

                <span class="tag-sec">
             Priority:                   <a ng-show="!typePriAction" ng-click="priTypeAction($index,this)">{{priAction.label}}</a>
                  <select ng-change="changePriTypeAction(this)" ng-show="typePriAction" ng-model="priAction" ng-options="opt as opt.label for opt in priOptions"></select>
                </span>

          </td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){

    /* ************************************************ */
        $scope.todoData = [
            {'title':'Create Google Logo'},
            {'title':'Talk to XYZ about Google'},
            {'title':'Testing Google Coding'},
            {'title':'Create Documentaion about Google'},
            {'title':'Create Client Sample form'},
            {'title':'Modify Top Navigation'},
            {'title':'Change Footer text and color'},
            {'title':'Redesign Google Dashboard'}
          ]


        $scope.options = [
          { label: 'Action Item', value: 1 },
          { label: 'Defect', value: 2 },
          { label: 'Meeting Invite', value: 3 },
          { label: 'Issue', value: 4 },
          { label: 'Enhancement', value: 5 },
          { label: 'Risk', value: 6 },
          { label: 'Proposal', value: 7 }
        ];
        $scope.selectedAction =$scope.options[1];
        $scope.selectTypeAction = function(index,context){
          console.log(index);
          context.typeAction = true;
        };
        $scope.changeTypeAction = function(context){
          context.typeAction = false;
        }

        $scope.desType = 'Google logo needs a new concept';
        $scope.desTypeAction = function(idx,context){
          context.typeDescAction = true;
        }
        $scope.changeDesAction = function(idx,context){
          context.typeDescAction = false;
        }

        $scope.priOptions = [
          { label: 'High', value: 1 },
          { label: 'Medium', value: 2 },
          { label: 'Low', value: 3 }
        ];
        $scope.priAction =$scope.priOptions[1];
        $scope.priTypeAction = function(index,context){
          console.log(index);
          context.typePriAction = true;
        };
        $scope.changePriTypeAction = function(context){
          context.typePriAction = false;
        }
        /* ************************************************ */
});

Plunker

Upvotes: 1

Poyraz Yilmaz
Poyraz Yilmaz

Reputation: 5857

Here is plunker for you.

You should keep flag for every individual properties, so define array for these flag like this,

    $scope.typeAction = [];
    $scope.typeDescAction = [];
    $scope.typePriAction = [];

and set them by using $index property of ng-repeat, for example

ng-show="!typeAction[$index]"

and you should edit your functions by sending index all time, for example,

    $scope.changeTypeAction = function(index){
      $scope.typeAction[index] = false;
    }

Upvotes: 1

Related Questions