AngularJS中使用ng-repeat时，如何在location.href中正确使用变量？

你的代码存在两个关键问题：

1. ng-repeat 错误绑定在了 <ul> 标签上，这会导致每个列表项都生成独立的 <ul>，而非在同一个列表下生成多个列表项
2. 原生 onclick 无法正确解析AngularJS的插值表达式 {{item.url}}，因为原生事件不会触发Angular的数据绑定机制

以下是两种可行的修正方案：

方案一：直接用ng-click绑定跳转逻辑 #

把 ng-repeat 移到 <li> 标签上，同时用Angular的 ng-click 指令替代原生 onclick：

<ul>
  <li ng-repeat="item in items">
    <button type="button" class="btn btn-success me-1" ng-click="location.href='/view-panel/' + item.url">
      no: {{item.no}}
    </button>
  </li>
</ul>

方案二：控制器中定义跳转函数（更推荐，逻辑更清晰） #

先在控制器里添加跳转方法：

$scope.goToPanel = function(item) {
  window.location.href = '/view-panel/' + item.url;
};

然后在HTML中调用这个函数：

<ul>
  <li ng-repeat="item in items">
    <button type="button" class="btn btn-success me-1" ng-click="goToPanel(item)">
      no: {{item.no}}
    </button>
  </li>
</ul>

内容的提问来源于stack exchange，提问作者Mrsennim