Question

I have a view in an angularjs application with a sidebar, where I can choose my insurers. By clicking on an insurer, I want my ng-grid show me some insurer's data. Now I can select the insurer, and see the <div class="well well-sm"> changes.

Here is my angular controller:

app.controller('ReportsInsurerPaymentsCtrl', ['$scope', '$http', '$filter', 'toaster', '$state', '$modal', function ($scope, $http, $filter, toaster, $state, $modal) {

  $scope.insurer_payments = [];
  $scope.insurer_payments = [];
  $scope.insurer_payment = {};

  $scope.gridOptions = {
    data: "insurer_payment",
    rowTemplate: '<div ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex() }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}} " ng-cell></div>',
    columnDefs: [
      {
        field: "date",
        displayName: "Date",
        cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field)}}</span></div>',
        width: 100
      },
      {
        field: "amount",
        displayName: "Amount",
        cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field)}}</span></div>'
      },
      {
        field: 'comment',
        displayName: 'Comment',
        cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field)}}</span></div>',
      }
    ],
  $scope.refresh = function () {
    var p = {
      name: $scope.filterOptions.filterText,
      pageNumber: (allPages >= $scope.pagingOptions.currentPage) ? $scope.pagingOptions.currentPage : $scope.pagingOptions.currentPage = 1,
      pageSize: $scope.pagingOptions.pageSize,
      sortInfo: sb.join("")
  };

    $http({
      url: "reports/insurer_payments.json",
      method: "GET",
      params: p
    }).success(function (data, insurer_payment) {
      $scope.totalServerItems = data.insurerPaymentsCount;
      $scope.insurer_payments_count = data.total_insurer_payments_count;
      $scope.insurer_payments = data.insurer_payments;
      $scope.insurer_payment = data.insurer_payment;
      if (insurer_payment) {
        $scope.insurer_payment = $filter('orderBy')($scope.insurer_payments, 'name')[0];
      } else {
        $scope.insurer_payment = $filter('filter')($scope.insurer_payments, {name: insurer_payment.name})[0];
      }
      if ($scope.insurer_payments) $scope.insurer_payment.selected = true;
      $scope.showContent = true;

      if ($scope.gridOptions.ngGrid) {
      $scope.gridOptions.ngGrid.buildColumns();
      }
    }).error(function () {
    });
  }, 100);
};

$scope.selectInsurerPayment = function(item){
    angular.forEach($scope.insurer_payments, function(item) {
      item.selected = false;
    });
    $scope.insurer_payment = item;
    $scope.insurer_payment.selected = true;
};
$scope.refresh();
}]);

A part of a view:

<a ng-repeat="insurer_payment in insurer_payments | orderBy:'name'"
  class="list-group-item m-l"
  ng-class="{'select m-l-none': insurer_payment.selected }"
  ng-click="selectInsurerPayment(insurer_payment)">
 <span class="block text-ellipsis m-l-n text-md" ng-class="{'m-l-none': insurer_payment.selected }">
                {{ insurer_payment.name }}
 </span>
</a>
<div class="well well-sm">
        <div class="row">
          <div class="col-sm-4">
            <strong>Commission: {{insurer_payment.commission}}</strong>
          </div>
          <div class="col-sm-4">
            <strong>Insurer Ppayment: {{insurer_payment.insurer_payment}}</strong>
          </div>
          <div class="col-sm-4">
            <strong>Inequality: {{insurer_payment.commission - insurer_payment.insurer_payment}}</strong>
          </div>
        </div>
      </div>
      <div class="table-responsive">
        <div ng-grid="gridOptions" class="gridStyle">

        </div>
      </div>

And a part of a rails controller:

def index
  insurer_payments = current_company.insurers.map do |insurer|
    {
      commission: insurer.contracts.pluck(:commission).sum.to_f,
      name: insurer.name,
      insurer_payment: insurer.insurer_payments.pluck(:amount).sum.to_f,
      id: insurer.id
    }
  end

  insurer_payment = current_company.insurers.map do |insurer|
    {
      amount: insurer.insurer_payments.pluck(:amount).map { |x| x.to_f },
      comment: insurer.insurer_payments.pluck(:comment),
      date: insurer.insurer_payments.pluck(:date),
      id: insurer.id
    }
  end

  total_insurer_payments_count = current_company.insurers.map do |insurer|
    insurer.insurer_payments.count
  end

  insurer_payments_count = current_company.insurer_payments.count

  respond_to do |format|
    format.json { render json: { insurer_payments: insurer_payments, insurer_payment: insurer_payment,
                               total_insurer_payments_count: total_insurer_payments_count,
                               insurerPaymentsCount: insurer_payments_count } }
  end
end

So, how it can be done, by selecting an insurer to see the corresponding data?

Answer 1

我不确定这一点，因为我没有您的所有代码，但您可能想尝试我下面的一些更改。

因为ng-repeat具有自己的范围，所以在insurer_payments 中迭代 insurer_payment与范围上的insurer_payment冲突。当您遍历insurer_payments时，您每次都在修改insurer_payment的值。

我会改变

$scope.gridOptions = { data: "insurer_payment",

到

$scope.gridOptions = { data: [];

由于数据是数组，而不是字符串。

在$ http的成功回调中，你需要设置gridOptions.data（除非这是其他地方，我不知道网格在哪里）

.success(function (data, insurer_payment) { $scope.gridOptions.data = data; ... }

selectInsurerPayment 功能：

$scope.selectInsurerPayment = function(item){ angular.forEach($scope.insurer_payments, function(item) { item.selected = false; }); $scope.selectedInsurerPayment = item; $scope.insurer_payment.selected = true; };

最后，在HTML的井中，将对insurer_payment的引用更改为selectedInsurerPayment，例如：

<strong>Commission: {{selectedInsurerPayment.commission}}</strong>

旧解决方案

在ng-repeat中：

ng-click="selectInsurerPayment(insurer_payment)"

到

ng-click="selection.insurer_payment = insurer_payment"

在井中，

<div class="well well-sm">

到

<div class="well well-sm" ng-if="selection.insurer_payment">

并将对insurer_payment的引用更改为selection.insurer_payment。{variable}，例如：

<strong>Commission: {{selection.insurer_payment.commission}}</strong>

通过点击<a> element in the sidebar

1 个答案: