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

我正在使用ui路由器创建多页表单。在表单的第一部分中，用户将选择一个按钮。此按钮的值将用于对第二页上加载的表进行排序。我以为可以用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}
    ];

});

最佳答案

当您使用UiRouter进行路由时，每次在页面之间调用控制器时（在这种情况下），它将初始化您的控制器。

这里需要的是一个将保留您的值的服务，因为该服务仅实例化一次（单例）。

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

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