问题
I have a table of customer records created with angularjs bootstrap-ui and uses ng-repeat.
At the end of each line in the table is a button to get more information about the customer.
When the button is clicked a modal form pops with the information.
my problem is whichever button I press I get the same customer number
The problem is I need to get the value of $index to the following bit of code:
$scope.selected = {
customer: $scope.customers[0]
};
The value of $index needs to replace the 0 value above
What I have done so far can be seen on plunker click here
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
< div class = "modal-header" > < h3 > I am a modal! < /h3>
</div > < div class = "modal-body" > < form class = "form-horizontal"
role = "form" > < div class = "form-group" > < label
for = "customerNumber"
class = "col-lg-2 control-label" > Email Address: < /label>
<div class="col-lg-10">
<input type="text" class="form-control" id="customerNumber"
ng-model="selected.customer.customerNumber"
ng-value="selected.customer.customerNumber">
</div > < /div>
</form > < /div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button > < button class = "btn btn-warning"
ng - click = "cancel()" > Cancel < /button>
</div >
</script>
<div>
<table class="table table-striped">
<thead>
<tr>
<th>Customer number</th>
<th>Customer name</th>
<th>Customer last name</th>
<th>Customer first name</th>
<th>phone</th>
</tr>
</thead>
<tbody ng-repeat="customer in customers">
<tr>
<td>{{ customer.customerNumber }}</td>
<td>{{ customer.customerName }}</td>
<td>{{ customer.contactLastName }}</td>
<td>{{ customer.contactFirstName }}</td>
<td>{{ customer.phone }}</td>
<td>
<button class="btn btn-default" ng-click="open()">
Customer details
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
'use strict';
angular.module('myApp', ['ui.bootstrap'])
.controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.customers = [
{
"customerNumber": 103,
"customerName": "Atelier graphique",
"contactLastName": "Schmitt",
"contactFirstName": "Carine ",
"phone": "40.32.2555"
},
{
"customerNumber": 112,
"customerName": "Signal Gift Stores",
"contactLastName": "King",
"contactFirstName": "Jean",
"phone": "7025551838"
},
{
"customerNumber": 114,
"customerName": "Australian Collectors, Co",
"contactLastName": "Ferguson",
"contactFirstName": "Peter",
"phone": "03 9520 4555"
}
];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
customers: function () {
return $scope.customers
}
}
});
modalInstance.result.then(function (selectedCustomer) {
$scope.selected = selectedCustomer;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope, $modalInstance, customers) {
$scope.customers = customers;
$scope.selected = {
customer: $scope.customers[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.customer);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
}
}
回答1:
ng-repeat directive has a variable
$index
You can pass this variable in the click function like this
<button class="btn btn-default" ng-click="open($index)">
Customer details
</button>
You need to accept this index as a parameter in your method, so just add the parameter
$scope.open = function (index) {
.... your method body
}
回答2:
Pass the customer object to your function first:
ng-click="ok(customer)"
Then find the index based on that object in your function:
$scope.ok = function (customer) {
var index = $scope.customers.indexOf(customer);
$scope.selected.customer = $scope.customers[index];
$modalInstance.close($scope.selected.customer);
};
回答3:
Don't do it like this - instead work with actual customer objects. Correct me if I am wrong but it looks like you have some kind of list of customers that when you click on them opens a modal with more details. Try something like this:
In the customer table:
<tbody ng-repeat="customer in customers">
<tr>
<td>{{ customer.customerNumber }}</td>
<td>{{ customer.customerName }}</td>
<td>{{ customer.contactLastName }}</td>
<td>{{ customer.contactFirstName }}</td>
<td>{{ customer.phone }}</td>
<td>
<button class="btn btn-default" ng-click="open(customer)">
Customer details
</button>
</td>
</tr>
</tbody>
In the controller:
$scope.open = function(customer){
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
customer: function () {
return customer;
}
}
});
modalInstance.result.then(function (selectedCustomer) {
$scope.selected = selectedCustomer;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
And in the modal controller:
var ModalInstanceCtrl = function ($scope, $modalInstance, customer) {
$scope.customer = customer;
$scope.ok = function () {
$modalInstance.close($scope.customer);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
}
}
And finally, in the modal view:
<script type="text/ng-template" id="myModalContent.html">
< div class = "modal-header" > < h3 > I am a modal! < /h3>
</div > < div class = "modal-body" > < form class = "form-horizontal"
role = "form" > < div class = "form-group" > < label
for = "customerNumber"
class = "col-lg-2 control-label" > Email Address: < /label>
<div class="col-lg-10">
<input type="text" class="form-control" id="customerNumber"
ng-model="customer.customerNumber"
ng-value="customer.customerNumber">
</div > < /div>
</form > < /div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button > < button class = "btn btn-warning"
ng - click = "cancel()" > Cancel < /button>
</div >
</script>
回答4:
Thank you for your suggestions Rob and Fourth.
I used a combination of both your suggestions
You can see the result on plunker by clicking here
The changes are shown below
<td>
<button class="btn btn-default"
ng-click="open(customer)"> <!-- Customer object now goes to controller-->
Customer details
</button>
</td>
Inside the controller the customer object is in scope of the open function only.
I had to get index so I could use it with the customers object
resolve: {
customerIndex: function () {
return $scope.customers.indexOf(customer)
},
customers: function () {
return $scope.customers
}
}
Both customers and customerIndex are used in the ModalInstanceCtrl
var ModalInstanceCtrl = function ($scope, $modalInstance, customers, customerIndex) {
$scope.customers = customers;
$scope.selected = {
customer: $scope.customers[customerIndex]
};
回答5:
it should be even simpler if you directly use $index. Hence, you will not require to lookup for the index using the customer object in your controller. Please have a look at the following it could also be tested on, plunker
index.html
<td>
<button class="btn btn-default" ng-click="open($index)">
Customer details
</button>
</td>
example.js
// code above this controller method wasn't modified
$scope.open = function (index) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
index: function() {
return index;
},
customers: function () {
return $scope.customers
}
}
});
modalInstance.result.then(function (selectedCustomer) {
$scope.selected = selectedCustomer;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
var ModalInstanceCtrl = function ($scope, $modalInstance, customers, index) {
$scope.customers = customers;
$scope.selected = {
customer: $scope.customers[index]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.customer);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
}
}
来源：https://stackoverflow.com/questions/24888816/how-do-i-get-index-from-an-ng-repeat-table-to-a-modal-controller