I want to dynamically show and hide table row details on every button click, but every time I click on span glyphonic icon all tr's details data are open by default .what should i change to make visible this data only for those elements on which i have clicked? ( in my case i need to make visible only certain data on which user has clicked):
<form role="form">
<script cam-script type="text/form-script">
$scope.selectedRow = null;
var persons = $scope.persons = [
{
"id": 1,
"name": "name1",
"age":"454",
"description":"this is simple name"
} ,
{
"id": 2,
"name": "name2",
"age":"4543",
"description":"this is simple name"
},
{
"id": 3,
"name": "name2",
"age":"4543",
"description":"this is simple name"
}
];
camForm.on('form-loaded', function() {
camForm.variableManager.createVariable({
name: 'persons',
type: 'Array',
value: persons
});
});
$scope.pageNumber = 0;
$scope.IsHidden=true;;
$scope.setPageNumber = function(index) {
$scope.pageNumber = index;
$scope.IsHidden = $scope.IsHidden ? false : true;
}
</script>
<div class="container">
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th> </th>
</tr>
</thead>
<tbody ng-repeat="item in persons " >
<tr >
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><button class="btn btn-default btn-xs" ><span class="glyphicon glyphicon-eye-open" ng-class="{$index == pageNumber }" ng-click="setPageNumber($index)($index)"></span></button></td>
</tr>
<tr ng-hide="IsHidden">
<td>
<label for="id" class="control-label">details</label>
<div class="controls">
<input id="description" class="form-control" type="text" ng-model="item.description" required readonly/>
</td>
</tr>
</tbody>
</table>
</div>
</form>
Here' the code you are looking for
var myApp = angular.module('myApp',[]);
myApp.controller('myController', ['$scope', function($scope) {
$scope.persons = [
{
"id": 1,
"name": "name1",
"age":"454",
"description":"this is simple name1"
} ,
{
"id": 2,
"name": "name2",
"age":"4543",
"description":"this is simple name2"
},
{
"id": 3,
"name": "name2",
"age":"4543",
"description":"this is simple name3"
}
];
$scope.toggle = function (index){
if($scope.persons[index].hidethis == undefined){
$scope.persons[index].hidethis = true;
}else{
$scope.persons[index].hidethis = !$scope.persons[index].hidethis;
}
}
}]);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="myApp" ng-controller="myController">
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th> </th>
</tr>
</thead>
<tbody ng-repeat="item in persons">
<tr>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td><button class="btn btn-default btn-xs" ng-click="toggle($index)"></button></td>
</tr>
<tr id="{{hideid + $index}}" ng-show="item.hidethis">
<td>
<label for="id" class="control-label">details</label>
<div class="controls">
<input id="description" class="form-control" type="text" ng-model="item.description" required readonly/>
</div>
</td>
</tr>
</tbody>
</table>
</form>
Related
I am trying to create a button that can help me to add a row into a DataTables table and still remain every element in each column.
I don't know why my code didn't work.
var table = null;
var arrData = [];
var arrDataPG = [];
arrData.push({
STT: 1,
id: 1,
product_type: "",
condition: "",
cashback: 0.0,
note: ""
});
$('#addRow').on('click', function () {
console.log(arrData.length);
if (arrData != '') {
var ida = arrData[0].id;
} else {
var ida = 1;
}
for (var i = 0; i < arrData.length; i++) {
if (arrData[i].id > ida) {
ida = arrData[i].id;
}
};
arrData.push({
STT: ida + 1,
id: ida + 1,
product_type: "",
condition: "",
cashback: 0.0,
note: ""
});
if (table != null) {
table.clear();
table.rows.add(arrData).draw();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"type="text/css"href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<table id="example" class="cell-border hover" style="width:100%">
<thead>
<tr>
<th>STT</th>
<th>Loại sản phẩm*</th>
<th>Điều kiện áp dụng</th>
<th>Rebate(%)*</th>
<th>Ghi chú</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="sorting_1" style="width:50px">
1
</td>
<td>
<textarea class="form-control text-primary" style="width:300px;" id="product_type"></textarea>
</td>
<td>
<textarea class="form-control text-primary" style="width:300px;" id="condition"></textarea>
</td>
<td>
<input type="number" id="cashback">
</td>
<td>
<textarea class="form-control text-primary" style="width:300px;" id="note"></textarea>
</td>
<td>
<div class="btn btn-danger remove" id=""><i class="fa-solid fa-ban"></i></div>
</td>
</tr>
</tbody>
</table>
<button style="width: 86px;" id="addRow" class="btn btn-success add">Addrow<i class="fa fa-plus" aria-hidden="true"></i></button>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
you need to initialise the DataTable before you can add the data to it - once that's done, you need to tell it about the shape of your data. You're also running into an issue that the data you've got in arrData is overwriting your input fields - so I moved the inputs into the table footer; that seems to make the most sense, TBH.
const arrData = [{
STT: 1,
id: 1,
product_type: "Car",
condition: "Poor",
cashback: 20,
note: "Well knackered"
}]
const table = $('#example').DataTable({
data: arrData,
columns: [{
data: 'STT'
},
{
data: 'product_type'
},
{
data: 'condition'
},
{
data: 'cashback'
},
{
data: 'note'
},
{
data: 'id',
visible: false
}
]
})
$('#addRow').on('click', function() {
let ida = null
if (arrData != '') {
ida = arrData[0].id
} else {
ida = 1
}
for (var i = 0; i < arrData.length; i++) {
if (arrData[i].id > ida) {
ida = arrData[i].id
}
}
arrData.push({
STT: ida + 1,
id: ida + 1,
product_type: $('#product_type').val(),
condition: $('#condition').val(),
cashback: $('#cashback').val(),
note: $('#note').val(),
})
table.clear()
table.rows.add(arrData).draw()
$('#product_type').val('')
$('#condition').val('')
$('#cashback').val('')
$('#note').val('')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"type="text/css"href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js
<table id="example" class="cell-border hover" style="width:100%">
<thead>
<tr>
<th>STT</th>
<th>Loại sản phẩm*</th>
<th>Điều kiện áp dụng</th>
<th>Rebate(%)*</th>
<th>Ghi chú</th>
<th></th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td class="sorting_1" style="width:50px">
1
</td>
<td>
<textarea class="form-control text-primary" style="width:300px;" id="product_type"></textarea>
</td>
<td>
<textarea class="form-control text-primary" style="width:300px;" id="condition"></textarea>
</td>
<td>
<input type="number" id="cashback">
</td>
<td>
<textarea class="form-control text-primary" style="width:300px;" id="note"></textarea>
</td>
<td>
<div class="btn btn-danger remove" id=""><i class="fa-solid fa-ban"></i></div>
</td>
</tr>
</tfoot>
</table>
<button style="width: 86px;" id="addRow" class="btn btn-success add">Addrow<i class="fa fa-plus" aria-hidden="true"></i></button>
Hopefully, that will get you on the right track. The thing to take the most notice of is your initialisation of the DataTable; once that's there, you should be fine.
I am having trouble looping through a JSON object and displaying certain values in a table. On that table, there is a view button for each row. When the user clicks the view button, a modal will appear. I can display the data but on the payment details table, it always displays only one data. I search a lot about this problem but I can't see any related to my problem.
My JSON Data:
{
"sales": [
{
"sales_id": "3",
"sales_date": "2021-01-12 01:26:33",
"sales_po": "100549",
"sales_so": "1234",
"sales_dr": "5768",
"sales_si": "1794",
"sales_particulars": "Authorized Personnel Only",
"sales_media": "Sticker on Sintra",
"sales_net_amount": "8601.60",
"sales_balance": "4601.60"
}
],
"payments": [
{
"payment_id": "3",
"payment_amount": "1000.00",
"payment_date": "2021-01-15",
"payment_remarks": ""
},
{
"payment_id": "4",
"payment_amount": "1000.00",
"payment_date": "2021-01-18",
"payment_remarks": ""
},
{
"payment_id": "5",
"payment_amount": "2000.00",
"payment_date": "2021-01-29",
"payment_remarks": ""
}
]
}
jQuery/ajax:
function view_payment_detail(sales_id) {
var modal = $('#payment-details-modal');
$.ajax({
type: 'POST',
url: url + 'GetPaymentInfoById',
data: { payment_info_id : sales_id },
dataType: 'json',
success: function (data) {
console.log(data);
modal.modal('show');
modal.find($('#sales_date')).html(data.sales[0].sales_date);
modal.find($('#sales_po')).html(data.sales[0].sales_po);
modal.find($('#sales_so')).html(data.sales[0].sales_so);
modal.find($('#sales_dr')).html(data.sales[0].sales_dr);
modal.find($('#sales_si')).html(data.sales[0].sales_si);
modal.find($('#sales_particulars')).html(data.sales[0].sales_particulars);
modal.find($('#sales_media')).html(data.sales[0].sales_media);
$.each(data.payments, function(i, payment) {
modal.find($('#payment_date')).html(data.payments[i].payment_date);
modal.find($('#payment_amount')).html(data.payments[i].payment_amount);
modal.find($('#payment_remarks')).html(data.payments[i].payment_remarks);
});
}
});
}
Table:
<div id="payment-details-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-green-600">
<h5 class="modal-title" id="modal-title"><i class="icon-cash3 mr-2"></i> PAYMENT DETAILS</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="payment_info_id" name="payment_info_id" class="form-control">
<h6 class="font-weight-semibold">Sales Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th colspan="3">Date</th>
<td id="sales_date"></td>
</tr>
<tr>
<th>PO Number</th>
<td id="sales_po"></td>
<th>SO Number</th>
<td id="sales_so"></td>
</tr>
<tr>
<th>DR Number</th>
<td id="sales_dr"></td>
<th>SI Number</th>
<td id="sales_si"></td>
</tr>
</table>
<hr>
<table class="table table-bordered">
<tr>
<th>Particulars</th>
<td id="sales_particulars"></td>
<th>Media</th>
<td id="sales_media"></td>
</tr>
</table>
</div>
<hr>
<h6 class="font-weight-semibold">Payment Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
<tr>
<td id="payment_date"></td>
<td id="payment_amount"></td>
<td id="payment_remarks"></td>
</tr>
</thead>
</table>
</div>
<hr>
<table>
<tr>
<th>Total Fees: </th>
<td id="sales_net_amount"></td>
</tr>
<tr>
<th>Total Paid: </th>
<td id="total_paid"></td>
</tr>
<tr>
<th>Balance: </th>
<td id="total_balance"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-green-600" data-dismiss="modal">Close</button>
</div>
</div>
</div>
You cannot have duplicated IDs. They must be unique.
Hence, I changed the code of your modal body from:
<tr>
<td id="payment_date"></td>
<td id="payment_amount"></td>
<td id="payment_remarks"></td>
</tr>
to:
<tr>
<td></td>
<td></td>
<td></td>
</tr>
I removed all the IDs because you can address each cell by index. At the same time I added an id to the table.
In the $.each loop you can .clone() the first tbody row, use the cloned element and append at the end of tbody.
$.each(data.payments, function (i, payment) {
var x = $('#tbbody tbody tr:first').clone().appendTo('#tbbody tbody');
x.find('td').eq(0).text(data.payments[i].payment_date);
x.find('td').eq(1).text(data.payments[i].payment_amount);
x.find('td').eq(2).text(data.payments[i].payment_remarks);
});
The snippet:
var data = {
"sales": [
{
"sales_id": "3",
"sales_date": "2021-01-12 01:26:33",
"sales_po": "100549",
"sales_so": "1234",
"sales_dr": "5768",
"sales_si": "1794",
"sales_particulars": "Authorized Personnel Only",
"sales_media": "Sticker on Sintra",
"sales_net_amount": "8601.60",
"sales_balance": "4601.60"
}
],
"payments": [
{
"payment_id": "3",
"payment_amount": "1000.00",
"payment_date": "2021-01-15",
"payment_remarks": ""
},
{
"payment_id": "4",
"payment_amount": "1000.00",
"payment_date": "2021-01-18",
"payment_remarks": ""
},
{
"payment_id": "5",
"payment_amount": "2000.00",
"payment_date": "2021-01-29",
"payment_remarks": ""
}
]
};
var modal = $('#payment-details-modal');
console.log(data);
modal.modal('show');
modal.find($('#sales_date')).html(data.sales[0].sales_date);
modal.find($('#sales_po')).html(data.sales[0].sales_po);
modal.find($('#sales_so')).html(data.sales[0].sales_so);
modal.find($('#sales_dr')).html(data.sales[0].sales_dr);
modal.find($('#sales_si')).html(data.sales[0].sales_si);
modal.find($('#sales_particulars')).html(data.sales[0].sales_particulars);
modal.find($('#sales_media')).html(data.sales[0].sales_media);
$.each(data.payments, function (i, payment) {
var x = $('#tbbody tbody tr:first').clone().appendTo('#tbbody tbody');
x.find('td').eq(0).text(data.payments[i].payment_date);
x.find('td').eq(1).text(data.payments[i].payment_amount);
x.find('td').eq(2).text(data.payments[i].payment_remarks);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<div id="payment-details-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-green-600">
<h5 class="modal-title" id="modal-title"><i class="icon-cash3 mr-2"></i> PAYMENT DETAILS</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="payment_info_id" name="payment_info_id" class="form-control">
<h6 class="font-weight-semibold">Sales Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th colspan="3">Date</th>
<td id="sales_date"></td>
</tr>
<tr>
<th>PO Number</th>
<td id="sales_po"></td>
<th>SO Number</th>
<td id="sales_so"></td>
</tr>
<tr>
<th>DR Number</th>
<td id="sales_dr"></td>
<th>SI Number</th>
<td id="sales_si"></td>
</tr>
</table>
<hr>
<table class="table table-bordered">
<tr>
<th>Particulars</th>
<td id="sales_particulars"></td>
<th>Media</th>
<td id="sales_media"></td>
</tr>
</table>
</div>
<hr>
<h6 class="font-weight-semibold">Payment Details</h6>
<div class="table-responsive">
<table class="table table-bordered" id="tbbody">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<hr>
<table>
<tr>
<th>Total Fees:</th>
<td id="sales_net_amount"></td>
</tr>
<tr>
<th>Total Paid:</th>
<td id="total_paid"></td>
</tr>
<tr>
<th>Balance:</th>
<td id="total_balance"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-green-600" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
<tr>
<td id="payment_date"></td>
<td id="payment_amount"></td>
<td id="payment_remarks"></td>
</tr>
</thead>
</table>
</div>
I have on table with 3 colums.There is no required field in my table.
when I click on save button each row should be save as separate object in a single array.
1.If document is not uploaded ,that can be empty.2.checkbox is checked it should be true otherwise false. 3.But Name should be in each object.
var app = angular.module('myApp', [])
app.controller('myController', function($scope) {
$scope.listName = [{
'name': 'aaa'
},{
'name': 'bbb'
},{
'name': 'ccc'
}];
$scope.saveDetails = function(doc) {
if ($('#status').is(':checked')) {
doc.status = 'true'
} else {
doc.status = 'false'
}
console.log(doc)
};
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
<table>
<thead>
<tr>
<th>Name</th>
<th>file</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='doc in listName'>
<td>{{doc.name}}</td>
<td>
<input type="file" ng-model="doc.file" />
</td>
<td>
<input type="checkbox" ng-model="doc.status" />
</td>
</tr>
</tbody>
</table>
<button ng-click="saveDetails(doc)">save</button>
</div>
Any help?Thanks!!
you dont need to jquery methods
try follwing:
var app = angular.module('myApp', [])
app.controller('myController', function($scope) {
$scope.listName = [{
'name': 'aaa',
file: "",
status:false
},{
'name': 'bbb',
file: "",
status:false
},{
'name': 'ccc',
file: "",
status:false
}];
$scope.saveDetails = function(doc) {
console.log($scope.listName)
};
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
<table>
<thead>
<tr>
<th>Name</th>
<th>file</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='doc in listName'>
<td>{{doc.name}}</td>
<td>
<input type="file" ng-model="doc.file" />
</td>
<td>
<input type="checkbox" ng-model="doc.status" />
</td>
</tr>
</tbody>
</table>
<button ng-click="saveDetails(doc)">save</button>
</div>
i m just learn vue.js
and i want to display a table data.my opinion is when display mode the table just show. and when i click edit button of the line of the table, i want this line convert to model.
this is my code:
```
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>pass</th>
<th>action</th>
</tr>
</thead>
<tbody>
<template v-for="data in apidata" track-by="$index">
<tr>
<td>{{$index + 1}}</td>
<td>
<div v-show="data.editmode"><input v-model="data.name"></div>
<div v-else>{{data.name}}</div>
</td>
<td>
<div v-if=data.editmode><input v-model="data.name"></div>
<div v-else>{{data.name}}</div>
</div>
</td>
<td>
<button v-on:click="remove($index)" class="btn btn-danger">remove</button>
<button v-on:click="edit(data)" class="btn btn-danger">edit</button>
</td>
</tr>
</template>
</tbody>
</table>
```
my data is like this
[{name:'test', pass:'1'}, {name:'test2', pass:'2'}]
i bind a edit()function to listen the click event.
edit: function(data){
alert(data.editmode);
data.editmode = true;
}
i think when i click .becuase the data.editmode will change to true.
this line will convert to input mode . but its useless.
i have tried v-if=data.editmode , v-if="data.editmode" ,v-show="data.editmode" , still got nothing
i dnt know why?
You just need to include editmode in your data declaration so that it is a reactive data item.
new Vue({
el: 'body',
data: {
apidata: [{
name: 'test',
pass: '1',
editmode: false
}, {
name: 'test2',
pass: '2',
editmode: false
}]
},
methods: {
edit: function(data) {
data.editmode = !data.editmode;
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>pass</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr v-for="data in apidata">
<td>{{$index + 1}}</td>
<td>
<div v-if="data.editmode">
<input v-model="data.name">
</div>
<div v-else>{{data.name}}</div>
</td>
<td>
<div v-if=data.editmode>
<input v-model="data.pass">
</div>
<div v-else>{{data.pass}}</div>
</td>
<td>
<button v-on:click="remove($index)" class="btn btn-danger">remove</button>
<button v-on:click="edit(data)" class="btn btn-danger">edit</button>
</td>
</tr>
</tbody>
</table>
Using ng-repeat I want to use ng-model and ng-show to subjectively select an area to expand for the purpose of updating pet, place or points. Right now, it shows for all p in Pets within ng-repeat but I only want it to show for the single p's update button that is clicked. Extra points if you can show me how to close it when the update button is clicked again. Here is my html with Angularjs directives:
<table>
<thead>
<tr>
<th colspan="1" class="text-center">
Pets, Places and Points
</th>
<th colspan="1" class="text-center">
Update
</th>
<tr>
<thead>
<tbody filter-list="search"ng-repeat="p in Pets">
<tr>
<td class="col-xs-6 col-sm-6 col-md-6 col-xl-6 merchant">
{{p.pet}}, {{p.place}} and {{p.points}}
</td>
<td class="col-xs-4 col-sm-4 col-md-4 col-xl-4 update">
<button ng-click="show()">Update</button>
<br>
<div ng-show="showing">
<input placeholder= "Pets" ng-model="Pets"/>
<br>
<input placeholder= "Places" ng-model="Places"/>
<br>
<input placeholder= "Points" ng-model="Points"/>
<br>
<button ng-click="Update(Pets, Places, Points)">Enter</button>
</div>
</td>
</tr>
</tbody>
</table>
The show(); function
$scope.show = function() {
console.log("show")
$scope.showing = true;
}
Sometimes, going back to basics works the best. Since we know each iteration in ng-repeat creates a new scope, in order to avoid using the inherited show function, a simple showing != showing should work (even though it's undefined by default, it's fine since that's a falsy value, but you can always initialize it as well).
See it here:
angular.module('app', [])
.controller('Ctrl', function($scope) {
$scope.Pets = [
{pet: 1, place: 1, points: 1},
{pet: 2, place: 2, points: 2},
{pet: 3, place: 3, points: 3}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<table>
<thead>
<tr>
<th colspan="1" class="text-center">
Pets, Places and Points
</th>
<th colspan="1" class="text-center">
Update
</th>
<tr>
<thead>
<tbody ng-repeat="p in Pets">
<tr>
<td class="col-xs-6 col-sm-6 col-md-6 col-xl-6 merchant">
{{p.pet}}, {{p.place}} and {{p.points}}
</td>
<td class="col-xs-4 col-sm-4 col-md-4 col-xl-4 update">
<button ng-click="showing = !showing">Update</button>
<br>
<div ng-show="showing">
<input placeholder="Pets" ng-model="Pets" />
<br>
<input placeholder="Places" ng-model="Places" />
<br>
<input placeholder="Points" ng-model="Points" />
<br>
<button ng-click="Update(Pets, Places, Points)">Enter</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
If you don't like this approach and want to use one common function (there are reasons you'd do that, but I don't see them in your example), you can use ng-repeat indices, and then do something like:
$scope.show = function(i) {
console.log("showing " + i)
$scope.showing[i] = true;
}
And simply invoke it like this:
<button ng-click="show($index)">Update</button>
and control the visibility like this:
<div ng-show="showing[$index]">
See it here:
angular.module('app', [])
.controller('Ctrl', function($scope) {
$scope.showing = [];
$scope.Pets = [
{pet: 1, place: 1, points: 1},
{pet: 2, place: 2, points: 2},
{pet: 3, place: 3, points: 3}
];
$scope.toggle = function(i) {
console.log("show")
$scope.showing[i] = !$scope.showing[i];
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<table>
<thead>
<tr>
<th colspan="1" class="text-center">
Pets, Places and Points
</th>
<th colspan="1" class="text-center">
Update
</th>
<tr>
<thead>
<tbody ng-repeat="p in Pets">
<tr>
<td class="col-xs-6 col-sm-6 col-md-6 col-xl-6 merchant">
{{p.pet}}, {{p.place}} and {{p.points}}
</td>
<td class="col-xs-4 col-sm-4 col-md-4 col-xl-4 update">
<button ng-click="toggle($index)">Update</button>
<br>
<div ng-show="showing[$index]">
<input placeholder="Pets" ng-model="Pets" />
<br>
<input placeholder="Places" ng-model="Places" />
<br>
<input placeholder="Points" ng-model="Points" />
<br>
<button ng-click="Update(Pets, Places, Points)">Enter</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>