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

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>

代码可以正常工作，但是当我 select 只有一家公司时，列表中的所有公司都会突出显示，就像我访问过它们一样。我有没有添加到此代码中？

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

每个 link 的 href 都是相同的。你需要在每一个的末尾附加一些东西来使它们独一无二。类似于：

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

如果您的代码不对参数做任何事情也没关系。

Answer 3

确实你设置了相同的 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();
};

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

ng-repeat highlights all links when only one visited

highlight

angularjs

angularjs-ng-repeat

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

ng-repeat highlights all links when only one visited

highlight

angularjs

angularjs-ng-repeat

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