Отображение данных в ng-сетке, нажав на элементе <a> на боковой панели

Question

У меня есть вид в приложении angularjs с боковой панелью, где я могу выбрать своих страховщиков. Нажимая на страховщика, я хочу, чтобы мои данные ng-grid отображали мне данные страховщика. Теперь я могу выбрать страховщика и посмотреть изменения <div class="well well-sm">.

Вот мой угловой регулятор:

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

И часть контроллера рельсов:

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 

Итак, как это может сделать выбор, выбрав страховщика, чтобы увидеть соответствующие данные?

Answer 1

Я не уверен в этом, так как у меня нет всего вашего кода, но вы можете попробовать некоторые из изменений, которые у меня есть.

Потому что ng-repeat имеет свой собственный объем, итерации через insurer_payment in insurer_payments противоречит страховщику_оплаты по сфере. Когда вы переходите через insurer_payments, вы каждый раз изменяете стоимость страховщика_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-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"> 

и изменить ссылки на страховщик_payment на selection.insurer_payment.{variable}, например:

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