加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读