javascript - 在 ng-Click 上更新和保存值

Question

我正在使用 ui-router 创建一个多页面表单。在表单的第一部分，用户将选择一个按钮。此按钮的值将用于对加载到第二页的表格进行排序。我以为我可以使用 ng-click 设置/更新按钮值，但它没有保存。第二页不按更新值排序。

我的具体问题出在我的 firstPage.html - 当我的 ng-button 被点击时。 sortType 的原始值是:sortType = ''。我的计划是在此页面上设置我的 sortType 值。我是这样做的:

<a ui-sref="orderForm.step2" 
   ng-click="sortType ='name'" 
   class="btn btn-block btn-info">

我认为 ng-click="sortType ='name'" 会更新并保存 sortType 值。然而，当第二页仍然是:sortType=''。你们对如何解决这个问题有什么建议吗？谢谢!

这是我的 firstPage.html:

<div class="form-group row" ng-controller="formController">
    <div class="col-xs-6 col-xs-offset-3">
        <a ui-sref="orderForm.step2" 
           ng-click="sortType ='name'" 
           class="btn btn-block btn-info">
           Title 
           <span class="glyphicon glyphicon-circle-arrow-right"></span>
        </a>
    </div>

    <h1>Presorted</h1> 
    <pre>{{sortType}}</pre>
</div>

这是我的第二页:

<div class="form-group" ng-controller="formController">
    <h2> Sort type: </h2>
    <pre>{{sortType}}</pre>

    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <td>
                    <label>Beverage</label>
                </td>
                <td>
                    <label>Type</label>
                </td>
                <td>
                    <label>Popularity</label>
                </td>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="drink in drinks | orderBy: sortType | filter:searchDrink">
            <td>{{drink.name}}</td>
            <td>{{drink.type}}</td>
            <td>{{drink.popularity}}</td>
        </tr>
    </tbody>
  </table>
</div>

这是我的 App.js 页面:

angular.module('myApp', ['ngAnimate', 'ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('orderForm', {
            url: '/orderForm',
            templateUrl: 'orderForm.html',
            controller: 'formController'
         })

        .state('orderForm.step1', {
            url: '/step1',
            templateUrl: 'step1.html'
         })

         .state('orderForm.step2', {
            url: '/step2',
            templateUrl: 'step2.html'
         });

     $urlRouterProvider.otherwise('/orderForm/step1');
 })

.controller('formController', function($scope) {

    $scope.formData = {};
    $scope.processForm = function() {
         alert('Thank you!');
     };

     $scope.sortType     = ''; 
     $scope.sortReverse  = false;  
     $scope.searchDrink    = '';     

     //Lists of Drinks:
     $scope.drinks = [
        {name:'Americano', type: 'Espresso Beverage', popularity: 4},
        {name:'Raspberry Tea', type: 'Tea', popularity: 2},
        {name:'Vanilla Latte', type: 'Espresso Beverage', popularity: 3 },
        {name:'Mocha', type: 'Espresso Beverage', popularity: 8},
        {name:'Pike', type: 'Freshly Brewed Coffee', popularity: 6},
        {name:'Green Tea', type: 'Tea', popularity: 4},
        {name:'Frappuccino', type: 'Iced Drinks', popularity: 5},
        {name:'Fruit Smoothie', type: 'Iced Drinks', popularity: 6}
    ];

});

Answer 1

当您使用 UiRouter 进行路由时，它会在每次调用时初始化您的 Controller ，在本例中是在页面之间。

这里您需要的是一种可以保存您的值的服务，因为它只实例化一次(单例)。

进一步阅读:https://docs.angularjs.org/guide/services

教程:https://www.youtube.com/watch?v=HXpHV5gWgyk