在AngularJS表组件中计算值

时间:2018-09-17 12:42:17

标签: javascript angularjs

我正在使用扩展表组件来显示在特定商店工作的服务员的列表。我需要做两件事:

1)我需要在最后一位服务员下插入新行,以对每个服务员的总列求和(请参见所附的屏幕截图)。

2)我需要计算运行总计,这类似于我想像的当前+以前的值。

这是我到目前为止的内容:

store-totals.list.view.html

<div class="page-section-header">
  <h1 class="list-title">Store Tender Totals</h1>
</div>

<act-search-box
  default-type="attendant"  
  search="vm.search"
  type="vm.type"
  placeholder="Enter a Store ID"
  type-options="[
  { label: 'Terminal', value : 'terminal' },
  { label: 'Total', value: 'total' },
  { label: 'Attendant', value: 'attendant' }
]" 
  on-search="vm.getAttendants()">
</act-search-box>

<div class="page-section-below-search-box single-width" style="width:27%;">
  <span style="float:left;margin-top:2.2%;font-size:14px;">Showing totals for</span>
  <act-date-picker model="vm.date" placeholder="Select a date" on-change="vm.getAttendants()">
  </act-date-picker>
</div>

  <act-expanding-table
  list="vm.attendantNames"
  ng-hide="vm.emptyResult"
  properties="[
    { type: 'attendantName', size: 2, label: 'Attendant Name'},
    { type: 'total', size: 2, label: 'Total', format:'currency'},
    { type: 'runningTotal', size:2, label: 'Running Total', format:'currency'}
  ]"
  allow-selecting="true">
  <div>
      <div class="col-xs-12 form-section-header">
        <h4>Tender Totals</h4>


  </act-expanding-table>
  <act-error-message ng-show="vm.errorMessage">{{ vm.errorMessage }}</act-error-message>

store-totals-list.controller.js

import { digest, showLoader } from 'act/services/events';
import 'act/components';
import Searcher from 'act/services/lists/searcher';
import * as moment from 'moment';
import * as api from '../services/totals';
import {header, dev} from 'act/services/logger';
import {goToError} from 'act/services/controller-helpers';
import '../components/store-total';
const defaultStartDate = moment().startOf('day');

export default class StoreTotalsController {
  constructor() {
    this.attendantNames = [];
    this.stores = [];
    this.emptyResult = true;
    this.totals = 0;
  }

  getAttendants() {
    showLoader('Searching');
    const baseUrl = '/src/areas/store-totals/services/tender-total-data.json';
    const getStores = new Request(baseUrl, {
      method: 'GET'
      });
    fetch(getStores).then(function(response){
      return response.json();
    }).then(resp => {
    if (!(resp[0] && resp[0].error)) {
      this.attendantNames = resp.stores[0].attendants;
      this.attendantNames.forEach(a=>{
        this.totals += a.total;
        console.log(this.totals);
      })
      this.emptyResult = false;
      this.errorMessage = null;

    } else {
      this.errorMessage = resp[0].error.name;
    }
    digest();
    showLoader(false);
    });
  }

  searchIfReady() {
    if (this.search && this.date && this.date.isValid()) {
      this.getSearch();
    }
  }

  updateDate(date) {
    this.date = moment(date).startOf('day');
    this.searchIfReady();
  }
}
StoreTotalsController.$inject = ['$stateParams'];

enter image description here

0 个答案:

没有答案