CODEWITHSUNDEEP
angularjsangular-ui-router
ojus kulkarni
ojus kulkarni

Reputation: 1907

UI Router - Condition in url

Here in following code I have to change url on condition of add, subtract and multiply.
I want to add condition for add, subtract and multiply in url, something like /:add?:subtract?:multiply
so if I click on add() function only /:add have to work in url same if I click onsub()function only/:subtract` have to work in url

State

angular.module("app");
  .config(function ($stateProvider) {
    $stateProvider.state('main', {
// here in url I have to apply conditions
      'url': '/:add/:subtract/:multiply',
      'abstract': true,
      'templateUrl': '/main.html',
      'controller': 'MainController'
    });
});

Controller

.controller('LandingController', function ($rootScope, $scope, $state) {
    $scope.add = false;
    $scope.subtract = false;
    $scope.multiply = false;
    $scope.add = function () {
        $state.go("main.addition", {'add': true}, {'reload': true});
    };
    $scope.sub = function () {
        $state.go("main.subtraction", {'subtract': true}, {'reload': true});
    };
    $scope.multiply = function () {
        $state.go("main.multiplication", {'multiply': true}, {'reload': true});
    };
})

============= Main controller =================

.controller('MainController', function ($scope, $stateParams) {
    $scope.add = $stateParams.add;
    $scope.subtract = $stateParams.subtract;
    $scope.multiply = $stateParams.multiply;
});

When I click on add() method it has to redirect to url '/true/addition..'
When I click on sub() method it has to redirect to url '/true/subtraction..'
When I click on multiply() method it has to redirect to url '/true/multiplication..'

But my problem is right now it is redirecting to url '/true///addition' or '//true//subtraction' or '///true/multiplication' it is showing the right page
but when I refresh the page that time url get changed and crash the application.

main.html

<div ng-if="add" > Addition </div>
<div ng-if="subtract" > Subtraction </div>
<div ng-if="multiply" > Multiplication </div>

landing.html

<a href="#" ng-click="add()"> Addition </a>
<a href="#" ng-click="sub()"> Subtraction </a>
<a href="#" ng-click="multiply()"> Multiplication </a>

Here add, subtract, multiply are Boolean variables which are getting from $state.go.

Upvotes: 0

Views: 623

Answers (2)

Priya Payyavula
Priya Payyavula

Reputation: 387

I would suggest to give the url's separately. because, looking at the number of times it is taking '/', it seems like it is checking all the url's and the word which matches is display but it is not omitting, '/'

Upvotes: 1

krutkowski86
krutkowski86

Reputation: 1083

I think your trying to achieve this:

 $stateProvider
    .state('main', {
      'url': '/',
      'abstract': true,
      'templateUrl': '/main.html',
      'controller': 'MainController'
    })
    .state('main.addition',{
      url: ':a/addition'
    })
    .state('main.subtraction',{
      url: ':b/subtraction'
    })
    .state('main.multiplication',{
      url: ':c/multiplication'
    });

main.html

<div ui-view=""></div>

landing.html

<a ui-sref="main.addition({a:true})"> Addition </a>
<a ui-sref="main.subtraction({b:true})"> Subtraction </a>
<a ui-sref="main.multiplication({c:true})"> Multiplication </a>

Hard to say what for do you need these parameters: a,b,c.

Here's a working jsfiddle - http://jsfiddle.net/irhabi/gsrg9cok/

I think it should look like this http://jsfiddle.net/irhabi/enurj8uu/

Upvotes: 2

Related Questions