Question

这是我的傻瓜http://embed.plnkr.co/pxGomrCFlLthhnLTQKnc/

我无法在每行显示某个div。现在，当显示表的多行，并且用户选择设置时，它会触发所有div＃设置。我试图找出当用户添加行时如何获得每行唯一的div＃设置。

这是我的HTML代码：

<!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="angular.js@1.4.8" 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>

这是我的控制器代码：

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;

    };

}

Answer 1

一种可能的解决方案，将showSettings更改为

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

你的HTML要：

<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>

演示： https://plnkr.co/edit/8NUPtAsahnh6K6bGIHGm

Answer 2

简单的角度解决方案：

$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);
};

添加setting作为对象属性并切换它。

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">

基于$index的呼叫功能。根据对象setting属性显示。

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

Answer 3

您可以在$ scope.ticks中设置每个tick对象的设置和showSettings（）属性，并添加ng-show =＆＃34; tick.settings＆＃34;在你的设置div中的tick ng-repeat。

showSettings（）的ng-click也变为tick.showSettings（）

AngularJS - 使用ng repeat分别显示div

3 个答案: