查找子字符串并用另一个 html/angularJS 替换答案

【问题标题】：Find substring and replace with another html/angularJS查找子字符串并用另一个 html/angularJS 替换
【发布时间】：2016-09-09 16:40:53
【问题描述】：

嗨，我有一个像这样的对象：

{
    "Properties": [
      "Name: Steven",
      "Country: Australia"
    ]
}

我用这个字符串从我们的后端得到这个对象。现在我必须在我们的 html 弹出窗口中显示它。我是这样做的：

<div>{{ object.Properties }}</div>

它有效，我在弹出窗口中得到以下格式的字符串：姓名：史蒂文，国家：澳大利亚

目标是，我得到以下格式（没有逗号，每个项目后面都有一个刹车，也许还有一条水平实线）：

姓名：史蒂文

国家：澳大利亚

我尝试了这样的 ng-repeat：

<div ng-repeat="property in object.Properties">{{ property }}<br></div>

它不起作用。现在我试图在字符串中找到逗号并将其替换为 br-tag。这行得通吗？我不知道如何做到这一点以及是否可能，所以我选择在这里问。

谢谢

【问题讨论】：

标签： html angularjs json replace find

【解决方案1】：

您遇到的问题是 Properties 不是哈希表，即使字符串中的 : 字符看起来如此。相反，它只是一个字符串数组。

试试这个：

angular
  .module("demo", [])
  .controller("demo", function($scope) {
    $scope.object = {
      "Properties": [
        "Name: Steven",
        "Country: Australia"
      ]
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>

<div ng-app="demo" ng-controller="demo">
  <div ng-repeat="prop in object.Properties">
    {{ prop.split(": ")[0] }}:
    {{ prop.split(": ")[1] }}
    <hr>
  </div>
</div>

这仍然可以使用一些实践改进，例如splitting 是您宁愿在代码中执行的操作，以便对其进行单元测试。具体细节取决于您的特定编码约定，但这里有另一个版本进行了一些快速改进（至少所有代码都从视图带到控制器端）：

angular
  .module("demo", [])
  .controller("demo", function($scope) {
    var data = {
      "Properties": [
        "Name: Steven",
        "Country: Australia"
      ]
    };

    $scope.props = data["Properties"].map(function(p) {
      var parts = p.split(": ");
      if (parts.length !== 2) {
        throw "Unexpected data " + p;
      }
      return {
        key: parts[0],
        value: parts[1]
      };
    });
  });

th, td { padding: 5px; background: silver; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>

<div ng-app="demo" ng-controller="demo">
  <table>
    <tr>
      <th>Key</th>
      <th>Value</th>
    </tr>
    <tr ng-repeat="prop in props">
      <th>{{prop.key}}</th>
      <td>{{prop.value}}</td>
    </tr>
  </table>
</div>

【讨论】：