how to show button on specific page/url

Question

how to show a button for a specific url in angular?

 <button class="abc" ng-model="btn1">hide</button>

if I want to show this button on a specific page how to do it?

Answer 1

I usually use ng-if or ng-show for this

 <button ng-if="showMe" class="abc" ng-model="btn1">hide</button>

In a controller, or directive you would set

$scope.showMe = true/false

depending on which url permits to show this button.

Answer 2

Assuming that you're using angular's default router, you can try this :

View:

<button ng-if="showButton" class="abc" ng-model="btn1">hide</button>

Controller :

$scope.showbutton = $location.url()==='your/url';

You can also use $location.path() if it's a better fit for your needs. I'll let you take a look at the doc : https://docs.angularjs.org/api/ng/service/$location

In case you're using ui-router you can directly check for the state in the HTML. You can look at this answer for an example : https://stackoverflow.com/a/27578532/2660180

Answer 3

Use Angular $location service.It parses the URL in the browser address bar (based on the window.location) and makes the URL available to your application.

Methods that you can use to get the current page url :

absUrl() : It will return full URL

Example :

// given URL http://example.com/#/some/path?foo=bar&baz=xoxo
var absUrl = $location.absUrl();
// => "http://example.com/#/some/path?foo=bar&baz=xoxo"

path() : Return path of current URL when called without any parameter.

Example :

// given URL http://example.com/#/some/path?foo=bar&baz=xoxo
var path = $location.path();
// => "/some/path"

Hence, You can try like this :

Controller :

$scope.path = $location.path();

Html :

<div ng-hide="path === '/pathname'">
    <button class="abc" ng-model="btn1">hide</button>
</div>