使用带有角度的链接进行切换

Question

我正在尝试用AngularJS切换bootstrap well类。在我添加控制器类之前，它工作得很好，但紧接着，页面就会重定向到“#”。

下面是我在添加控制器之前的代码。

<div id="advanced-search">
        <h4><a ng-click="toggle=!toggle" href="">Advanced</a></h4>
    </div>
    <div id="search-filters" class="well" ng-show="toggle">
        <label>
            <input type="checkbox">Tests</label>
        <label>
            <input type="checkbox">Certifications</label>
    </div>

后置控制器

<form ng-controller="SearchCtrl" ng-submit="submit()">

    <div class="input-group" id="search-input">
        <input type="text" id="search-bar" class="form-control input-lg" ng-model="text">
        <span class="input-group-btn">
            <button class="btn btn-default btn-lg" id="search-button" type="submit">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        </button>
        </span>
    </div>

    <div id="advanced-search">
        <h4><a ng-click="toggle = !toggle" href="#">Advanced</a></h4>
    </div>
    <div id="search-filters" class="well" ng-show="toggle">
        <label>
            <input type="checkbox">Tests</label>
        <label>
            <input type="checkbox">Certifications</label>
    </div>

</form>

Answer 1

向'href‘属性添加值。

<a ng-click="toggle=!toggle" href="javascript://">Advanced</a>

Answer 2

删除您的href：

<a ng-click="toggle = !toggle">Advanced</a>

或者更改它的跨度：

<span ng-click="toggle = !toggle">Advanced</span>

Answer 3

你写好控制器了吗？当我将你的代码粘贴到plunker中时，它一开始并不工作，直到我定义了你的控制器，然后它才开始工作

http://embed.plnkr.co/lhhkdUEEF17dGpWMqNrd/preview

如果您已经编写了控制器，请检查它是否正确连接，以及控制台中是否有任何会阻止angular工作的错误。