AngularJS表格多prID链接问题：点击单个ID仅传递对应值

嘿，我明白你的困扰了——现在表格单元格里的多个prID是绑在一个链接上的，点整个单元格都会把所有ID传过去，得改成点哪个ID就传哪个对吧？这事儿不难，咱们一步步来：

核心思路 #

把原来拼接成字符串的多个prID拆成独立的可点击链接，每个链接只对应一个ID，这样点击的时候自然就只会传递当前点击的那个ID了。

具体实现步骤 #

1. 拆分ID字符串为数组
   不管是在控制器预处理数据，还是直接在视图里处理，咱们得把用; 分隔的ID字符串拆成数组。比如你的数据里每个条目有个prIDs字段，像"2; 30; 25"这种：

   // 假设控制器里的数据源是$scope.tableData
   $scope.tableData.forEach(item => {
     // 提前把字符串拆成数组，方便视图使用
     item.idList = item.prIDs.split('; ');
   });
   

2. 修改表格视图代码
   把原来的单个<a>标签换成用ng-repeat遍历拆分后的ID数组，为每个ID生成独立的链接：

   <td>
     <!-- 遍历每个ID，生成单独的链接 -->
     <span ng-repeat="singleId in item.idList">
       <a href="#/your-path/{{singleId}}" ng-click="handlePrIdClick(singleId)">
         {{singleId}}
       </a>
       <!-- 保留原来的分号分隔符，最后一个ID不加 -->
       <span ng-if="!$last">; </span>
     </span>
   </td>
   

3. 为啥这么管用？

   • split('; ')把一串ID拆成了单个ID组成的数组，每个ID都是独立的个体；
   • ng-repeat循环数组，给每个ID单独创建链接，点击时只会触发当前链接的跳转，传递对应的singleId；
   • ng-if="!$last"是为了让显示效果和原来一致，只在非最后一个ID后面加分号。

可选优化：直接在视图拆分 #

要是不想在控制器预处理，也可以直接在视图里拆分字符串，省掉控制器里的循环：

<td>
  <span ng-repeat="singleId in item.prIDs.split('; ')">
    <a href="#/your-path/{{singleId}}">{{singleId}}</a>
    <span ng-if="!$last">; </span>
  </span>
</td>

这种方式更简洁，适合简单场景；如果后续还要多次用到拆分后的ID数组，还是在控制器预处理更合适。

这样改完之后，用户点哪个prID就只会把那个ID传到URL里啦，完美解决你的问题！

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