点击li <a> element not working inside ng-repeat

时间:2017-02-14 16:16:57

标签: javascript angularjs

In my html I have something like this :

   <div class="list-table-wrapper embedded-medium">
                <table class="list-table embedded-list-table">
                    <thead>
                        <tr>
                            <th>
                                <a href="#list-table" class="table-sort table-sort-desc">
                                    <span class="table-sort-text">Account Name</span>
                                    <span class="table-sort-indicator"></span>
                                </a>
                            </th>
                            <th>
                                <a href="#list-table" class="table-sort table-sort-desc">
                                    <span class="table-sort-text">Service Level</span>

                                </a>
                            </th>

                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in vm.items | limitTo : vm.pageSize : (vm.currentPage-1)*vm.pageSize">
                            <td class="table-link"><a ng-link="['MigrationStatus']" class="ng-binding" href="migration-status.html">{{item.accountName}}</a></td>
                            <td class="table-text">{{item.serviceLevel}}</td>
                            <td class="table-input">
                                <div class="btn-group">
                                    <div class="dropdown">
                                        <div class="dropdown-toggle" ng-click="batch.showSettings = !batch.showSettings"></div>
                                        <ul class="dropdown-menu visible" ng-show="batch.showSettings">
                                            <li><span class="dropdown-category">Manage</span></li>
                                            <li class=""><a href="#" ng-click="removeAccount(item.accountName)">Remove from Panel</a></li>
                                            <li class=""><a href="#">View in Encore</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>

Now in my component I am simply console logging the same:

            vm.removeAccount = function(accountName){
                console.log(accountName);
            }

But it is simply redirecting to localhost:8000/# but not logging anything in console.

UPDATE If I remove href="#" though it is not redirecting, it is not logging the data also.

What am I doing wrong ?

1 个答案:

答案 0 :(得分:1)

从锚标记中删除href="#",该标记重定向到/#路由。我猜你还没有配置.otherwise州/路由,这就是为什么你看不到用户界面的任何变化。

您可以将其设为href="",不会执行任何重定向。

然后removeAccount方法应该在controllerAlias之前

ng-click="vm.removeAccount(item.accountName)"