如何替换$ http json响应中的每个字符串实例

CODEPEN here: http://codepen.io/anon/pen/dGeNLK

CODEPEN:http://codepen.io/anon/pen/dGeNLK

I have a $http response like the following.

我有一个$ http响应,如下所示。

$http({
        method: 'GET',  
        url: _spPageContextInfo.webAbsoluteUrl + "/itemsSite/_api/web/lists/getByTitle('items')/items?$select=*",
        cache: true,
        headers: { "Accept": "application/json;odata=verbose" }
    }).success(function (data, status, headers, config) {
        $scope.items = data.d.results;          

    }).error(function (data, status, headers, config) {

    });

The results, of which there are usually between 50 and 100, look somewhat like this

结果通常在50到100之间,看起来有点像这样

      {
    name: 'Item One',
    desc: "Item 1 [ITEM:1]View 1[/ITEM] Item 1b [ITEM:1b]View 1b[/ITEM] Item 1c [ITEM:1c]View 1c[/ITEM]"
  },
  {
    name: 'Item Two',
    desc: "Item 2 [ITEM:2]View 2[/ITEM] Item 2b [ITEM:2b]View 2b[/ITEM] Item 2c [ITEM:2c]View 2c[/ITEM]"
  },
  {
    name: 'Item three',
    desc: "Item 3 [ITEM:3]View 3[/ITEM] Item 3b [ITEM:3b]View 3b[/ITEM] Item 3c [ITEM:3c]View 1c[/ITEM]"
  }

And are then displayed using an ng-repeat like.

然后使用ng-repeat显示。

< div ng-repeat="item in items">
    < div class="col-sm-12" ng-bind-html="item.details | filter:search">< /div>
< /div>

Inside each is a block of text which potentially contains multiple strings from an old system that resemble the following.

每个内部都是一个文本块,可能包含来自旧系统的多个字符串,类似于以下内容。

[item:id]item name[/item]

How would I transform the json so that any instances of the above string could be intercepted and transformed into a clickable modal link such as

我将如何转换json,以便截获上述字符串的任何实例并将其转换为可点击的模态链接,例如

< a ng-click="viewItemDetails('1a');" >View 1a< /a >

I cannot change the structure of the text blocks.

我无法改变文本块的结构。

NOTE: I have asked a similar question before and the suggestions neither worked nor were very graspable.

注意:我之前曾问过类似的问题,这些建议既不起作用也不易掌握。

1 个解决方案

#1

One way to do it is to pre process your data. Something like this: (I'll post a link to working code soon)

一种方法是预处理您的数据。这样的事情:(我会尽快发布工作代码的链接)

$scope.items.map(function(n) {
  var str = n.desc,
      re = /\[ITEM:.*?\]/ig,
      found = str.match(re);
  found = found.map(function(m) {
    return m.split(':')[1].replace(']', '');
  });

  return n.items = found;
});

and then use the new "items" property in a nested ng-repeat:

然后在嵌套的ng-repeat中使用新的“items”属性:

<ul>
  <li ng-repeat="item in items" fixLinks>{{item.name}}
    <div>
      <span ng-repeat="n in item.items">
        Item {{n}} 
        <a href ng-click="viewItemDetails({{n}})">
          View {{n}}
        </a>&nbsp;
      </span>
    </div>
    <hr/>
  </li>
</ul>

Here's the codepen

这是codepen

UPDATE Here's a pen that does the replacement:

更新这是一支替换笔:

$scope.items.map(function(n) {
  var str = n.desc,
      re = /\[ITEM:(.*?)\]/ig,
      tpl = '<a href ng-click="$1">'
  str = str.replace(re, tpl);
  str = str.replace(/\[\/ITEM\]/ig, '</a>');
  return n.muDesc = str;
});

UPDATE #2 : Using directive, compiling and calling the controller scope method. This can probably be improved but hopefully it helps for now. Here's the updated pen

更新#2:使用指令,编译和调用控制器范围方法。这可能会有所改善,但希望它现在有所帮助。这是更新的笔

Directive code:

app.directive('fixLinks', function ($parse, $compile) {
  function replaceStr(str) {
    var re = /\[ITEM:(.*?)\]/ig,
        tpl = '<a href ng-click="click(\'$1\')">'
    str = str.replace(re, tpl);
    str = str.replace(/\[\/ITEM\]/ig, '</a>');
    return str;
  }

  return {
    scope: {
      text: '=',
      flClick: '&'
    },
    link: function(scope, element) {
      var el = angular.element('<span>' + replaceStr(scope.text) + '</span>');
      $compile(el)(scope);
      element.append(el);
      scope.click = function(id) {
        scope.flClick({id: id});
      }
    }
  };
});

Markup:

<ul>
  <li ng-repeat="item in items">
    <div>{{item.name}}</div>
    <div fix-links text="item.desc" fl-click="viewItemDetails(id)"></div>
    <hr/>
  </li>
</ul>

#1