Question

以下是代码：

<ul style="list-style: none;">
    <li ng-repeat="company in companies | orderBy:'name' | filter:companies_filter">
        <a href="#!/companies" ng-click="companySelected(company)">
            {{company.name}}
        </a>
    </li>
</ul>

代码正在运行，但是当我选择一家公司时，列表中的所有公司都会像我访问过的那样突出显示。我在这段代码中添加了什么内容吗？

Answer 1

这是因为所有公司都有相同的href，如果您使用的是ui-router，您可以在路线中添加一个参数，例如：

$stateProvider.state({
    name: 'companies',
    url: '/companies/:companyId'
});

你可以这样使用：

<ul style="list-style: none;">
    <li ng-repeat="company in companies | orderBy:'name' | filter:companies_filter">
        <a href="#!/companies/{{company.id}}" ng-click="companySelected(company)">
            {{company.name}}
        </a>
    </li>
</ul>

通过这种方式，每家公司都有自己的href，这不会发生。如果不清楚，请告诉我您使用的路径库。

Answer 2

确实你设置了相同的href但是你应该使用ng-style而不是像这样的ng-click：

<ul style="list-style: none;">
    <li ng-repeat="company in companies | orderBy:'name' | filter:companies_filter"  ng-class="{ active: isActive('#!/companies/'+company.id) }">
        <a href="#!/companies">
            {{company.name}}
        </a>
    </li>
</ul>

和你的js

$scope.isActive = function (viewLocation) {
     return viewLocation === $location.path();
};

Answer 3

每个链接的href都相同。你需要在每一个的末尾添加一些东西以使它们独一无二。类似的东西：

<a href="#!/companies?id={{company.id}}" ng-click="companySelected(company)">

如果您的代码不对参数执行任何操作，则无关紧要。

当只有一个访问时，ng-repeat突出显示所有链接

3 个答案: