Wie bekomme ich $index aus einer ng-repeat-Tabelle, um eine modal-controller?

ng-repeat-Direktive hat eine variable

$index

Übergeben Sie diese variable in der click-Funktion wie folgt

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

Müssen Sie akzeptieren diesen index als parameter in der Methode, so fügen Sie einfach den parameter

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

InformationsquelleAutor adib.mosharrof

Mach es nicht wie dieser - anstatt die Arbeit mit tatsächlichen Kunden-Objekte. Korrigiert mich wenn ich mich Irre, aber es sieht aus wie haben Sie eine Art Liste mit Kunden, wenn Sie auf Sie klicken, öffnet sich ein modal mit mehr details. Probieren Sie etwas wie dieses:

In der customer-Tabelle:

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

In der Steuerung:

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

};

Und in der modal-controller:

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

$scope.customer = customer;

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

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

Werden und schließlich in das modale anzeigen:

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

InformationsquelleAutor Fourth

sollte es auch einfacher, wenn Sie direkt verwenden $index. Daher werden Sie nicht verlangen, die Suche nach dem index mit dem customer-Objekt im controller. Bitte haben Sie einen Blick auf die folgende es könnte auch geprüft werden, 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');
  }
}

InformationsquelleAutor Hamzeen Hameem