Question

您好，我有一个这样的对象：

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

我从后端使用此字符串获取此对象。现在我必须在html的弹出窗口中显示它。我是这样做的：

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

它有效，我在弹出窗口中以下列格式获取字符串：姓名：Steven，国家：澳大利亚

目标是，我得到了以下格式（在每个项目之后没有逗号和制动器，也许是水平实线）：

姓名：史蒂文

国家：澳大利亚

我尝试了这样的ng-repeat：

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

它不起作用。现在我尝试在字符串中找到逗号并用br-tag替换它。这会有用吗？我不知道如何做到这一点，如果有可能，所以我选择在这里问。

谢谢

Answer 1

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

请改为尝试：

＆＃13;

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

＆＃13;

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

＆＃13;

这仍然可以使用一些做法改进，例如split ting是您在代码中所做的事情，因此可以进行单元测试。详细信息将取决于您的特定编码约定，但这是另一个版本，有一些快速改进（至少所有代码都从视图带到控制器端）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

查找子字符串并替换为另一个html / angularJS

1 个答案: