如何从 ng-repeat 表中获取 $index 到模态控制器? [英] How do I get $index from an ng-repeat table to a modal controller?
问题描述
我有一个使用 angularjs bootstrap-ui 创建的客户记录表，并使用 ng-repeat.
表格中每一行的末尾都有一个按钮，用于获取有关客户的更多信息.
当点击按钮时，会弹出一个带有信息的模态表单.
我的问题是我按哪个按钮会得到相同的客户编号
问题是我需要将 $index 的值获取到以下代码位:
$scope.selected = {客户:$scope.customers[0]};$index 的值需要替换上面的 0 值
到目前为止我所做的可以在 plunker 点击这里
<script type="text/ng-template" id="myModalContent.html"><div 类 =模态标题"><h3 >我是模态！</h3></div ><div 类 =模态体"><形式类=形式水平"角色=形式"><div类=表单组"><标签for = "客户编号"class = "col-lg-2 control-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></表单 ></div><div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button ><按钮类 = "btn btn-warning"ng - click = "cancel()" >取消/按钮></div ><div><table class="table table-striped"><头><tr><th>客户编号</th><th>客户名称</th><th>客户姓氏</th><th>客户名字</th><th>电话</th></tr></thead><tbody ng-repeat="客户中的客户"><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()">顾客信息</td></tr></tbody>'使用严格';angular.module('myApp', ['ui.bootstrap']).controller('ModalDemoCtrl', function ($scope, $modal, $log) {$scope.customers = [{客户编号":103，"customerName": "Atelier graphique","contactLastName": "施密特","contactFirstName": "Carine ",电话":40.32.2555"},{客户编号":112，"customerName": "信号礼品店","contactLastName": "国王","contactFirstName": "让",电话":7025551838"},{客户编号":114，"customerName": "澳大利亚收藏家公司","contactLastName": "弗格森","contactFirstName": "彼得",电话":03 9520 4555"}];$scope.open = 函数 () {var modalInstance = $modal.open({templateUrl: 'myModalContent.html',控制器:ModalInstanceCtrl，解决: {客户:函数(){返回 $scope.customers}}});modalInstance.result.then(function (selectedCustomer) {$scope.selected = selectedCustomer;}， 功能 () {$log.info('Modal 在以下时间被驳回:' + new Date());});};});//请注意，$modalInstance 表示一个模态窗口(实例)依赖项.//和上面使用的 $modal 服务不一样.var ModalInstanceCtrl = 函数($scope，$modalInstance，customers){$scope.customers = 客户；$scope.selected = {客户:$scope.customers[0]};$scope.ok = 函数 () {$modalInstance.close($scope.selected.customer);};$scope.cancel = 函数 () {$modalInstance.dismiss('cancel');}}
ng-repeat 指令有一个变量
$index你可以像这样在点击函数中传递这个变量
你需要在你的方法中接受这个索引作为参数，所以只需添加参数
$scope.open = 函数(索引){.... 你的方法体}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');
}
}
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
}
这篇关于如何从 ng-repeat 表中获取 $index 到模态控制器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
