How to use Angular expression in Angular Strap's dropdown's href?

Question

I am using AngularJS with Angular Strap plugin for one of my projects. On the page I have a table. One of the columns contains some links.

After clicking on the link I pop-ups Angular Strap's dropdown (as contextual menu).

This menu contains two items:

details,
board.

Clicking on details item open-ups Angular Strap's aside (with some data to be shown) - this one is working well.

The problem is, the second item should redirects to a specific page (using dropdown's href attribute). My question is - how to use angular expression in this href attribute?

Part of my view's code - with dropdown:

<button type="button" class="btn btn-link"
    ng-click="selectGroup(group)"
    data-html="1"
    data-animation="am-flip-x"
    data-placement="bottom",
    bs-dropdown="dropdown">
        {{ group.name }}
</button>

Bs-dropdown's dropdown definitions from controller:

$scope.dropdown = [
    {
        text: "Details",
        click: "showDetails()" // Opens up Angular Strap's aside.
    },
    {
        text: "Board",
        href: "/group/{{ $scope.group.number }}" // Not evaluated.
    }
];

Clicking on "Board" dropdown's item is redirecting to something like: "127.0.0.1:8000/#/group/{{group.number}}" rather than (i.e.) "127.0.0.1:8000/#/group/2".

As a workaround I have created another method (i.e.) openBoard() as follows:

var openBoard = function() {
    var groupNumber = $scope.group.number;
    window.location.href="127.0.0.1:8000/#/" + groupNumber;
}

Calling this method in "Board" item's click is working, but causes some other problems and more - is not the way I want to go (semantically incorrect).

One more thing at the end. Whenever page loads (and controller has been initialized) value stored in $scope.group is undefined. I am setting a proper value whenever group link (from above mentioned table) is being clicked (and a moment before dropdown is displayed).

Anyone has any ideas how to use Angular expressions with Angular Strap's dropdown (in href)?

why you don't try href: "/group/" + $scope.group.number" . — Pankaj Parkar
– Pankaj Parkar, Commented Mar 7, 2015 at 22:09
Please see the one before last section of above description. As I mentioned - $scope.group at the very beginning is undefined. I tried a similar approach to your with no success (null exceptions). Even with a method like this: var groupId = function(group) { if(group === null) return ""; return group.number; }; I supposed that, after updating $scope.group the view should be updated (and above method should return a correct value). But it is not working either. — Tomasz Dzieniak
– Tomasz Dzieniak, Commented Mar 7, 2015 at 22:20
after group gets assign add second element to dropdown array { text: "Board", href: "/group/"+$scope.group.number } — Pankaj Parkar
– Pankaj Parkar, Commented Mar 7, 2015 at 22:26
I haven't even thought about editing my dropdown array until now. So, I ended up with one more method prepareDropdown() which is being executed just after selecting group (and where I am setting proper href attribute) - similar to what You have offered. @pankajparkar shouldn't You add Your commend as an answer? Then, I could mark it as correct. — Tomasz Dzieniak
– Tomasz Dzieniak, Commented Mar 7, 2015 at 22:43

Pankaj Parkar · Accepted Answer · 2015-03-07 22:50:33Z

1

As $scope.group member doesn't available at starting while creating dropdown array, that will result href: "/group/{{ $scope.group.number }}" this to href: "/group/undefined". So I'd suggest you to initially load dropdown with one value,

$scope.dropdown = [
    {
        text: "Details",
        click: "showDetails()" // Opens up Angular Strap's aside.
    }
];

& whenever group values gets fetched, do assign the second dropdown option

$scope.dropdown.push({
    text: "Board",
    href: "/group/" + $scope.group.number
});

Hope this work around would help you, Thanks.

answered Mar 7, 2015 at 22:50

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tomasz Dzieniak Over a year ago

As push() method will always add another dropdown item (every single click) I just prefer to reinitialize the whole $scope.dropdown array (because I need just two items - and only one "Board" item). But generally, it is a correct answer.

Pankaj Parkar Over a year ago

yes..reintialization would be better way in your case..Thanks :)

andalm · Accepted Answer · 2015-03-07 21:42:47Z

0

I think that you must change {{ $scope.group.number }} for this /group/group.number

answered Mar 7, 2015 at 21:42

andalm

816 bronze badges

1 Comment

Tomasz Dzieniak Over a year ago

Not working. Resolves as "127.0.0.1:8000/#/$scope.group.number".

Collectives™ on Stack Overflow

How to use Angular expression in Angular Strap's dropdown's href?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related