如何从 ng-repeat 表中获取 $index 到模态控制器？

Question

我有一个使用 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');
}
}

Answer 1

ng-repeat 指令有一个变量

$index

你可以像这样在点击函数中传递这个变量

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

你需要在你的方法中接受这个索引作为参数，所以只需添加参数

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

Answer 2

首先将客户对象传递给您的函数：

ng-click="ok(customer)"

然后在你的函数中找到基于该对象的索引：

$scope.ok = function (customer) {
  var index = $scope.customers.indexOf(customer);
  $scope.selected.customer = $scope.customers[index];
  $modalInstance.close($scope.selected.customer);
};

Answer 3

不要这样做 - 而是使用实际的客户对象。如果我错了，请纠正我，但看起来您有某种客户列表，当您单击它们时会打开一个包含更多详细信息的模式。试试这样的：

在客户表中：

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

在控制器中：

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

};

在模态控制器中：

var ModalInstanceCtrl = function ($scope, $modalInstance, customer) {

$scope.customer = customer;

$scope.ok = function () {
    $modalInstance.close($scope.customer);
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
}
}

最后，在模态视图中：

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

Answer 4

感谢您的建议 Rob 和 Fourth。

我结合了你的两个建议

点击here可以在plunker上查看结果

变化如下图

<td>
    <button class="btn btn-default" 
        ng-click="open(customer)"> <!-- Customer object now goes to controller-->
        Customer details
    </button>
</td>

在控制器内部，客户对象仅在 open 函数的范围内。

我必须获取索引，以便可以将它与客户对象一起使用

resolve: {
    customerIndex: function () {
        return $scope.customers.indexOf(customer)
    },
    customers: function () {
        return $scope.customers
    }
}

customers 和 customerIndex 都在 ModalInstanceCtrl 中使用

var ModalInstanceCtrl = function ($scope, $modalInstance, customers, customerIndex) {

$scope.customers = customers;
$scope.selected = {
    customer: $scope.customers[customerIndex]
};

Answer 5

如果直接使用$index应该会更简单。因此，您不需要使用控制器中的客户对象来查找索引。请看下面的它也可以测试，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');
  }
}