【问题标题】:Using multiple delimiters in split [duplicate]在拆分中使用多个分隔符[重复]
【发布时间】:2018-11-28 18:43:18
【问题描述】:

我正在使用 AngularJs、html 来显示表格并显示表格中的记录。
演示:http://plnkr.co/edit/xHRLAynOpUiLWbOKhqUm?p=preview&preview

我正在尝试单击第二列中的数字超链接。目前,我正在使用逗号 (,) 分隔符拆分数字,并使用 <a href> 链接传递我点击的相关数字(可以查看第一行链接的工作)。

有时由于数据是动态的,我可能会得到分号 (;) 或冒号 (:) 作为分隔符,然后代码中断,在单击链接时传递多个关联的数字。

<a ng-repeat="associateNum in player.associatedNumber .split(',')" href="https://urladdr/associateid={{associateNum}}" target="_blank">
       {{associateNum}}<span ng-if="$index+1 != player.associatedNumber.split(',').length">;</span></a>

即使同一行中的关联数字以,;:作为分隔符,如何支持上述&lt;a href&gt;链接?

js代码:

app.controller('MainCtrl', function($scope) {
  $scope.players = [{
    "name": "Robert C",
    "associatedNumber": "21,10,133",
    "standing": true,
    "result":"Delivered,shipped,shipped"
}, {
    "name": "Joey C",
    "associatedNumber": "55,2:22;33",
    "standing": false,
    "result":"To be delivered,Delivered"
}, {
    "name": "Bobby A",
    "associatedNumber": "15;22:11",
    "standing": true,
    "result":"TO be delivered"
}, {
    "name": "John A",
    "associatedNumber": "1,33,34",
    "standing": true,
    "result":"To be delivered,shipped"
}];
});

【问题讨论】:

  • 你能试试encodeURIComponent(value)吗?
  • 不需要使用encodeURIComponent..我需要在点击数字时传递关联的数字。例如,对于第二行,当用户将鼠标悬停在 15 上并单击它时,我有 15;22:11,15 必须传入 URL。单击 22 时,22 应该传入 URL。但是当我使用 split(',') 时,它不会拆分值 15;22:11。所以我想使用分隔符分割,或者;或:

标签: angularjs angularjs-ng-repeat tml


【解决方案1】:

我会添加一个过滤器:

app.filter('splitNumber', function() {
  return function(input) {
        return input.replace(/[;:]/g,',').split(',');
  };
});

并像这样使用它:

ng-repeat="associateNum in player.associatedNumber | splitNumber"

我已经 fork 你的 plunk here

【讨论】:

  • 你也可以用这个替换&lt;span ng-if...&gt;中的分割。不错的解决方案!
【解决方案2】:

Split 也需要一个正则表达式:

app.filter('splitNumber', function() {
  return function(input) {
    //return input.replace(/[;:]/g,',').split(',');
    return input.split(/[,:;]/);
  };
});

DEMO on PLNKR

欲了解更多信息,请参阅MDN JavaScript Reference - String.prototype.split()

【讨论】:

  • 我每天都学到新东西 :) 谢谢。
猜你喜欢
  • 2018-08-18
  • 2022-01-13
  • 2011-06-27
  • 1970-01-01
  • 2018-11-28
  • 2020-04-17
  • 1970-01-01
  • 2017-03-21
相关资源
最近更新 更多