0

顧客、請求、方法の 3 つのタブがあります。最初のタブには Bootstrap Typeahead があり、顧客の json ファイルに接続されています。2 番目のタブは、未払い料金のある顧客アカウントの詳細ビューです。最後に、3 番目のタブは実際に顧客にクレジット カードで請求することです。さらに、UI Router を使用して複雑な階層をナビゲートしています。タブは、支払いと呼ばれる親状態の子であるメイク支払いと呼ばれるページの名前付きビューです。最初のタブ (顧客) で先行入力を使用して、2 番目のタブ (請求) で顧客の詳細を選択して表示しようとしています。ユーザーがドロップダウンから人を選択すると、すぐに次のタブに移動し、次のタブにその人の詳細が表示されることを願っています。

make-payment.html(マイタブ):

<h3 class="text-center">Make a One-Time Payment</h3>
<uib-tabset type="pills nav-pills-centered">

  <uib-tab heading="1">
    <div ui-view=customers></div>
  </uib-tab>

  <uib-tab heading="2">
    <div ui-view=billing></div>
  </uib-tab>

  <uib-tab heading="3">
    <div ui-view=method></div>
  </uib-tab>

</uib-tabset>

customers.html & typeahead.js ctrl:

angular
  .module('myApp')
  .controller('TypeAheadCtrl', function($scope, $http) {
    $http.get('customers.json').success(function(data) {
      $scope.customers = data;
    });

    var self = this;
    self.submit1 = function() {
      console.log('First form submit with', self.customer)
    };


  });
<div ng-controller="TypeAheadCtrl as ctrl">
  <form ng-submit="ctrl.submit1()" name="customerForm">
    <div class="form-group">
      <label for="account">Account Number</label>
      <input type="text" class="form-control" placeholder="Search or enter an account number" ng-model="ctrl.customer.account" uib-typeahead="customer as customer.index for customer in customers | filter:$viewValue | limitTo:6" typeahead-template-url="templates/customer-tpl.html"
      typeahead-no-results="noResults">
    </div>
  </form>
</div>

app.js (私は ui-router のものを持っています)

.config(function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/payments/make-payment');

      $stateProvider

      // HOME STATES AND NESTED VIEWS ========================================
        .state('payments', {
        url: '/payments',
        templateUrl: 'views/payments.html'
      })

      .state('activity', {
          url: '/activity',
          templateUrl: 'views/activity.html'
        })
        // nested lists
        .state('payments.make-payment', {
          url: '/make-payment',
          views: {
            '': {
              templateUrl: 'views/make-payment.html'
            },
            'customers@payments.make-payment': {
              templateUrl: 'views/customers.html'
            },
            'billing@payments.make-payment': {
              templateUrl: 'views/billing.html'
            },
            'method@payments.make-payment': {
              templateUrl: 'views/method.html'

            });

        });

請求.html

<p>{{ctrl.customer.account.name}}</p>
<p>{{ctrl.customer.account.address}}</p>
<p>{{ctrl.customer.account.email}}</p>
<p>{{ctrl.customer.account.phone}}</p>

4

1 に答える 1

0

選択した顧客データをサービスに送信し、2 つのタブでサービスからプルできます。

したがって、実際にドロップダウンからユーザーを選択するとき、または myFactory.setCustomer(data) と呼べるものを選択すると思います。

他の 2 つの状態では、myFactory の getCustomer() 関数を見ることができます

.factory('myFactory', myFactory);
    function myFactory() {
        var customer;
        function setCustomer(data) {
            customer = data;
        }
        function getCustomer() {
            return customer;
        }

        //public API
        return {
            setCustomer: setCustomer,
            getCustomer: getCustomer
        }
    }
于 2015-12-30T23:07:01.890 に答える