Question

我正在使用angularjs。我有一个包含数据列的表，其中包含超链接，当在<td>数据中单击时，'prID'将传递给URL，如演示中所示。但问题是对于表中的一些行我有多个prID传递，当点击它时，它传递所有prID而不是我想只传递一个用户鼠标悬停的prID并单击该ID。

样本： https://plnkr.co/edit/sWbpovAT7II1eM4yRA2X?p=preview

示例：对于表格中的第二行，我有值2; 30; 21。当用户鼠标悬停并单击它时，它正在URL中传递2; 30; 21，而我想一次传递单个值。当用户将鼠标悬停在2时它应该传递值2，当鼠标悬停在30时，它应该传递30 ...这样我有几行具有多个prID并且数据是动态的。

示例代码：

<table border="1">
         <tr ng-repeat="data in dataInfo">
         <td><a href="http://myURL.com/getInfo/viewStatus?prInfo={{data.prID}}" target="_blank"> {{data.prID}}</a></td>
     </tr>
</table>

Answer 1

当data.prID上有多个ID时，您需要嵌套循环。请尝试这种方式：

<tr ng-repeat="data in dataInfo">
   <td><span ng-repeat="link in data.prID.split(';')"><a href="http://myURL.com/getInfo/viewStatus?prInfo={{link}}" target="_blank"> {{link}}</a><span ng-if="!$last">;</span></span></td>
 </tr>

Answer 2

这是我从Hanif编辑的代码

＆＃13;

// Code goes here

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DataCtrl', function ($scope) {

$scope.dataInfo = [
  	{
    	"prID": "1",
      "name": "Fight Club",
      "desc": "Brad"
    },
  	{
    	"prID": "2; 30; 21",
      "name": "Matrix (Series)",
      "desc": "Keanu Reeves"
    },
  	{
    	"prID": "33",
      "name": "V for Vendetta",
      "desc": "Hugo Weaving"
    },
    {
    	"prID": "13",
      "name": "V for Vendetta",
      "desc": "Hugo Weaving"
    },
    {
    	"prID": "111; 55",
      "name": "V for Vendetta",
      "desc": "Hugo Weaving"
    },
    {
    	"prID": "3",
      "name": "V for Vendetta",
      "desc": "Hugo Weaving"
    }
  ];
  
  
});

＆＃13;

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    
    <script src="script.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="DataCtrl">
  
  <table border="1">
     <tr ng-repeat="data in dataInfo">
       <td>
         <a ng-repeat="link in data.prID.split(';')" href="http://myURL.com/getInfo/viewStatus?prInfo={{link}}" target="_blank"> {{link}}<span ng-if="$index+1 != data.prID.split(';').length">;</span></a>
        
       </td>
     </tr>
  </table>
</div>
  </body>
</html>

＆＃13;

Demo here

根据选择传递值

2 个答案: