Comment puis-je obtenir $index à partir d'une ng-repeat tableau modal contrôleur?

ng-repeat directive a une variable

$index

Vous pouvez passer cette variable dans la fonction de clic comme ce

<button class="btn btn-default" ng-click="open($index)">
Customer details
</button>

Vous devez accepter cet indice comme un paramètre dans votre méthode, il suffit d'ajouter le paramètre

$scope.open = function (index) {
.... your method body
}

OriginalL'auteur adib.mosharrof

Ne pas le faire de cette façon - au lieu de travailler avec de véritables objets de client. Corrigez-moi si je me trompe, mais il semble que vous avez une sorte de liste de clients que lorsque vous cliquez sur eux ouvre un modal avec plus de détails. Essayez quelque chose comme ceci:

Dans la table client:

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

Dans le contrôleur:

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

Et dans la modale de contrôleur:

var ModalInstanceCtrl = function ($scope, $modalInstance, customer) {
$scope.customer = customer;
$scope.ok = function () {
$modalInstance.close($scope.customer);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
}
}

Et enfin, dans la modale de vue:

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

OriginalL'auteur Fourth

il devrait être encore plus simple si vous utilisez directement $index. Par conséquent, vous n'aurez pas besoin de rechercher l'index de l'aide de l'objet client dans votre contrôleur. Jetez un oeil à ce qui suit, il pourrait également être testé sur, 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');
}
}

OriginalL'auteur Hamzeen Hameem