CODEWITHSUNDEEP
javascripthtmlangularjs
PK-1825
PK-1825

Reputation: 1489

How to edit particular column value in table using angulajs?

i have added "Add_Note" button inside table's column once button clicked text-area and save buttons are opening but problem is it effecting all row i want to show them by using index value, how to achieve this using ng-repeat. if i want to click in particular row only that row's text-area should open remaining should be close. enter image description here

var myApp = angular.module('myApp', [])
  
      .controller('employeeController', function ($scope) {
     
   var employees = [{
    "Name": "Alfreds Futterkiste",
    "City": "Berlin",
    "Country": "Germany"
  }, {
    "Name": "Berglunds snabbköp",
    "City": "Luleå",
    "Country": "Sweden"
  }, {
    "Name": "Blauer See Delikatessen",
    "City": "Mannheim",
    "Country": "Germany"
  }, {
    "Name": "Blondel père et fils",
    "City": "Strasbourg",
    "Country": "France"
  }, {
    "Name": "Bólido Comidas preparadas",
    "City": "Madrid",
    "Country": "Spain"
  }, {
    "Name": "Bon app'",
    "City": "Marseille",
    "Country": "France"
  }, {
    "Name": "Bottom-Dollar Marketse",
    "City": "Tsawassen",
    "Country": "Canada"
  }, {
    "Name": "Cactus Comidas para llevar",
    "City": "Buenos Aires",
    "Country": "Argentina"
  }, {
    "Name": "Centro comercial Moctezuma",
    "City": "México D.F.",
    "Country": "Mexico"
  }, {
    "Name": "Chop-suey Chinese",
    "City": "Bern",
    "Country": "Switzerland"
  }, {
    "Name": "Comércio Mineiro",
    "City": "São Paulo",
    "Country": "Brazil"
  }];
      $scope.employees=employees;
      
      $scope.showHideAddNotes = function (vendorsId, $index) {
        $scope.comments = vendorsId;
        angular.forEach($scope.employees, function (vendr) {
            if (vendr.VendID == $scope.comments) {
                $scope.showComment = true;
            }
        })
    }
})
        .textarea-container {
            position: relative;
        }

            .textarea-container textarea {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<body ng-app="myApp">
    <div ng-controller="employeeController">
        <div class="container" style="margin-top:40px;">
            <div class="row">
                {{error}}
                <div class="col-md-6">
                    <table class="table table-bordered table-condensed">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>City</th>
                                <th>Country</th>
                            </tr>
                        </thead>
                        <tbody >
                            <tr ng-repeat="emp in employees" ng-style="set_color(emp)">
                                <td>{{emp.Name}}<br>
                                 <div>
                                                <a href="#" ng-click="showHideAddNotes(vendor.VendID, $index)">
                                                    <img src="http://icongal.com/gallery/image/43850/notes_add.png" />
                                                </a>
                                            </div>
                                            <div class="textarea-container" ng-model="commentsArea" ng-show="showComment">
                                                <textarea name="foo" placeholder="Add comments here...">{{vendor.PaymetNotes}}</textarea>
                                                <span class="label label-danger pointer" onclick="addNote()">Save</span>
                                            </div>
                                
                                </td>
                                <td>{{emp.City}}</td>
                                <td>{{emp.Country}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

Upvotes: 0

Views: 58

Answers (1)

Vaibhav Gavali
Vaibhav Gavali

Reputation: 46

You can do it in following way, I am assuming $scope.griddata as your Data Object which will be an array of objects.

You can just loop through $scope.griddata to add a boolean property say showNotes = false into each object (Each array item). So by default, with the help of this flag, all the row's text area will be hidden initially.

$scope.gridData = [
{'note':'Lorem Ipsum is simply dummy text ','showNotes':false},
{'note':'dummy text 2','showNotes':false}
];

$scope.showHideAddNotes = function ($index) {
    $scope.griddata[$index].showNotes = !$scope.griddata[$index].showNotes;
}

then in showHideAddNotes() function just inverse the flag as per click.

Fiddle for reference: https://jsfiddle.net/vaibhavgavali92/1x04qs0v/

Note: Apart from each flag for the respective item you can use a global flag to restrict to edit note of one row/item at a time. so it cannot open edit flow of multiple items.

Upvotes: 1

Related Questions