Disable or hide href link based on value

Question

I need to either hide or disable the href in this code when the user type is a 2 (vm.usertype === 2)

    <div class="col-md-4 col-md-4">
        <a href="#/newquote">
            <div class="panel panel-info">
                <div class="panel-heading text-center">
                    <div class="row">
                        <div><h2><i class="fa fa-file-o"></i></h2></div>
                    </div>
                    <div class="row">
                        <div>New Quote</div>
                    </div>
                </div>
            </div>
        </a>
    </div>

I tried -

 <div class="col-md-4 col-md-4" ng-disabled="vm.userType=='2'">

but that still enabled the link

Answer 1

You can hide it using ng-hide

<div class="col-md-4 col-md-4" ng-hide="vm.userType=='2'">

or just not setting the href to nothing

<a ng-href="{{ vm.userType=='2' ? '' : '#/newquote' }}">

Answer 2

Your link is still enabled because div as a standard html element doesn't have the option to be enabled or disabled. ng-disable will work file if that would be a button or radio button etc. Not sure how exactly you imagine a disabled link would look like, but if I would need to display for the end-user a link if value is "vm.userType!='2'", I would use better ng-show="vm.userType=='2'" and this will display it when needed, and hide it otherwise.