个人中心
gpt4 book ai didi

javascript - AngularJS - 使用 ng Repeat 单独显示 div

转载 作者：行者123 更新时间：2023-12-02 14:24:51 25 4
gpt4 key购买 nike

这是我的笨蛋 http://embed.plnkr.co/pxGomrCFlLthhnLTQKnc/

我在显示每行中的某个 div 时遇到问题。现在，当显示表的多行并且用户选择设置时，它会触发所有 div#settings。我试图弄清楚当用户添加一行时如何获得每行唯一的 div#settings 。

这是我的 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>

这是我的 Controller 代码:

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;

    };

}

最佳答案

一种可能的解决方案，将 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

关于javascript - AngularJS - 使用 ng Repeat 单独显示 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38360483/

25 4 0
文章推荐： javascript - 将对象插入数组会导致 TypeError
文章推荐： javascript - Jquery - 如何从 e.target 获取嵌套 DIV 的 ID？
文章推荐： javascript - 使用相同的 ng-model 从 AngularJS 中的数组中选择下拉选项
文章推荐： javascript - 使用 Spoon 从数据网格连接
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com