angularjs – 如何从ng-repeat表中获取$index到模态控制器?
发布时间:2020-12-17 17:06:33 所属栏目:安全 来源:网络整理
导读:我有一个用 angularjs bootstrap-ui创建的客户记录表,并使用ng-repeat. 表格中每行的末尾是一个按钮,用于获取有关客户的更多信息. 单击该按钮时,会弹出一个模态窗体并显示该信息. 我的问题是我按下哪个按钮我得到相同的客户编号 问题是我需要将$index的值转
我有一个用
angularjs bootstrap-ui创建的客户记录表,并使用ng-repeat.
表格中每行的末尾是一个按钮,用于获取有关客户的更多信息. 单击该按钮时,会弹出一个模态窗体并显示该信息. 我的问题是我按下哪个按钮我得到相同的客户编号 问题是我需要将$index的值转换为以下代码: $scope.selected = { customer: $scope.customers[0] }; $index的值需要替换上面的0值 到目前为止我所做的工作可以在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指令有一个变量
$index 你可以像这样在click函数中传递这个变量 <button class="btn btn-default" ng-click="open($index)"> Customer details </button> 您需要接受此索引作为方法中的参数,因此只需添加参数即可 $scope.open = function (index) { .... your method body } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |