CODEWITHSUNDEEP
javascripthtmlangularjs
Ren44
Ren44

Reputation: 107

AngularJS - show divs separately using ng repeat

Here is my plunker http://embed.plnkr.co/pxGomrCFlLthhnLTQKnc/

I am having trouble showing a certain div in per row. Right now when multiple rows of the table are shown, and user selects settings it triggers all of the div#settings. I am trying to figure out how to get div#settings unique to each row when the user adds a row.

here is my html code:

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="col-md-12">
    <div id="ticketsTableAdd" ng-controller="ticketsTableCtrl">
      <a ng-click="add()"><span class="glyphicon glyphicon-plus"></span> Add Row</a>
      <br />
      <div id="ticketsbkg" class="row">
        <div class="col-md-2">Ticket Name</div>
        <div class="col-md-2">Quanity Avaliable</div>
        <div class="col-md-2">Payment Type</div>
        <div class="col-md-1">Currency</div>
        <div class="col-md-1">Price</div>
        <div class="col-md-1">HST</div>
        <div class="col-md-1">Fee</div>
        <div class="col-md-1">Total Cost</div>
        <div class="col-md-1">Actions</div>
      </div>
      <div ng-repeat="tick in ticks">
        <div id="ticketsinfo" class="row">
          <div class="col-md-2">
            <input type="text" class="form-control" placeholder="Ticket Name" />
          </div>
          <div class="col-md-2">
            <input type="text" class="form-control" placeholder="Quanity Avaliable" />
          </div>
          <div class="col-md-2">
            <input type="text" class="form-control" placeholder="Payment Type" />
          </div>
          <div class="col-md-1">
            <input type="text" class="form-control" placeholder="Currency" />
          </div>
          <div class="col-md-1">
            <input type="text" class="form-control" placeholder="Price" />
          </div>
          <div class="col-md-1">
            <input type="text" class="form-control" placeholder="HST" />
          </div>
          <div class="col-md-1">
            <input type="text" class="form-control" placeholder="Fee" />
          </div>
          <div class="col-md-1">
            <input type="text" class="form-control" placeholder="Total" />
          </div>
          <div class="col-md-1"><a ng-click="showSettings()"><span class="glyphicon glyphicon-cog"></span></a>&nbsp;<a data-ng-click="removeRow($index)"><span class="glyphicon glyphicon-trash"></span></a></div>
        </div>
        <div id="settings" ng-show="settings" class="row check-element animate-hide">
          <div class="row">
            <div class="col-md-5">
              <small><strong>Settings</strong></small>
              <hr />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div id="ticketsfooter">
      </div>
    </div>

  </div>
</body>

</html>

here is my controller code:

var myApp = angular.module('myApp',[]);

myApp.controller('ticketsTableCtrl', ticketsTableCtrl);

ticketsTableCtrl.$inject = ['$scope'];

function ticketsTableCtrl($scope) {

    $scope.ticks = [{}];

    $scope.add = function () {
        $scope.ticks.push({});
    }

    $scope.removeRow = function (index) {
        // remove the row specified in index
        $scope.ticks.splice(index, 1);
        // if no rows left in the array create a blank array
        if ($scope.ticks.length() === 0) {
            $scope.ticks = [];
        }
    };

    $scope.settings = false;
    $scope.showSettings = function () {
        //If DIV is hidden it will be visible and vice versa.
        $scope.settings = $scope.settings ? false : true;

    };

}

Upvotes: 0

Views: 230

Answers (3)

theblindprophet
theblindprophet

Reputation: 7937

Simple Angular Solution:

$scope.add = function () {
    $scope.ticks.push({
        "setting": false
    });
}

$scope.showSettings = function (num) {
    console.log(num);
    //If DIV is hidden it will be visible and vice versa.
    $scope.ticks[num].setting = !($scope.ticks[num].setting);
};

Add setting as an object property and toggle it.

HTML:

<div class="col-md-1"><a ng-click="showSettings($index)"><span class="glyphicon glyphicon-cog"></span></a>&nbsp;<a data-ng-click="removeRow($index)"><span class="glyphicon glyphicon-trash"></span></a></div>

<div id="settings" ng-show="tick.setting" class="row check-element animate-hide">

Call function based on $index. Show based on the objects setting property.

Plunker: https://plnkr.co/edit/HJDYFbX9dhfy4AaSeNHx?p=preview

Upvotes: 1

Ismail RBOUH
Ismail RBOUH

Reputation: 10450

One possible solution, change your showSettings to 

$scope.showSettings = function (index) {
     angular.element("#settings-"+index).toggle();
};

And your HTML to:

<div ng-repeat="tick in ticks">
    <div id="ticketsinfo" class="row">
        <!-- .... -->
        <div class="col-md-1"><a ng-click="showSettings($index)"><span class="glyphicon glyphicon-cog"></span></a>&nbsp;<a data-ng-click="removeRow($index)"><span class="glyphicon glyphicon-trash"></span></a></div>
    </div>
    <div id="settings-{{$index}}" class="row check-element animate-hide">
        <div class="row">
            <div class="col-md-5">
                <small><strong>Settings</strong></small>
                <hr />
            </div>
        </div>
    </div>
</div>

Demo: https://plnkr.co/edit/8NUPtAsahnh6K6bGIHGm

Upvotes: 1

Norbert Huurnink
Norbert Huurnink

Reputation: 1316

You can make settings and showSettings() properties of each tick-object in $scope.ticks and add ng-show="tick.settings" in your settings div inside the tick ng-repeat.

The ng-click for showSettings() also becomes tick.showSettings()

Upvotes: 0

Related Questions