CODEWITHSUNDEEP
javascripthtmlangularjs
user3281388
user3281388

Reputation: 267

Update and Save Value on ng-Click

I am creating a multi-page-form using an ui-router. During the first part of the form, the user will select a button. This button's value will be used to sort the table that is loaded on the second page. I thought I could set/update the buttons value with the ng-click, but it is not saving. The second page doesn't sort by the updated value.

My specific problem is in my firstPage.html - when my ng-button is clicked. The original value of sortType is: sortType = ''. My plan was to set my sortType value on this page. This is how I did it: 

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

I thought that ng-click="sortType ='name'" would have updated and saved the sortType value. However, when the second page is still: sortType= ''. Do any of you have suggestions on how to fix this? Thanks!

Here's my 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>

Here's my second page: 

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

Here's my App.js Page: 

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}
    ];

});

Upvotes: 1

Views: 2351

Answers (2)

lucky7id
lucky7id

Reputation: 385

When you route using UiRouter, it initializes your controller each time it is called, in this case, between pages.

What you need here is a service that will hold your values, as it is only instantiated once (a singleton).

further reading: https://docs.angularjs.org/guide/services

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

Upvotes: 2

gkpo
gkpo

Reputation: 2672

Whenever a page is loaded, the controller is instantiated. And because you have $scope.sortType = ''; at the top of your controller, the value is set to ''.

Also, in your template, by doing sortType = 'name' you're binding the value to the variable sortType of your controller's $scope. But each controller has it's own scope. So you won't be able to pass the variable like that.

The quick and dirty way would be to bind the value to the $rootScope. Then in your second controller you could do $rootScope.sortType.

My advice would actually be to use something like angular-wizard since this is what you seem to want to achieve: https://github.com/mgonto/angular-wizard

Upvotes: 1

Related Questions