0
を使用してショーのdiv要素は、ここに私のplunker http://embed.plnkr.co/pxGomrCFlLthhnLTQKnc/AngularJS - 別途NGリピート
私はトラブル行ごとに特定の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="[email protected]*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="[email protected]*" 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> <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;
};
}