Question

CODEPEN在这里：http://codepen.io/anon/pen/dGeNLK

我有如下的$ 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) {

    });

结果通常在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]"
  }

然后使用ng-repeat显示。

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

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

[item:id]item name[/item]

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

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

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

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

Answer 1

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

$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;
});

然后使用新的＆＃34;项目＆＃34;嵌套ng-repeat中的属性：

<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

<强>更新这是替换的pen：

$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 ：使用指令，编译并调用控制器范围方法。这可能会有所改善，但希望它现在有所帮助。这是updated pen

指令代码：

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});
      }
    }
  };
});

标记：

<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>

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

1 个答案: