Question

我有一个angularJS项目，在这里我从服务器请求数据，并返回带有国家名称列表的JSON对象，如下所示：

$scope.countries=[{
   countriesName : 'USA, England, Germany, France'
}];

因此，当我绑定数据以在视图中呈现它时，我会像这样使用 ng-repeat ：

<tbody>
   <tr ng-repeat="country in countries">
          <td>{{country.countriesName }}</td>
    </tr>
</tbody>

当前视图：

Countries Name :
-----------------
USA, England, Germany,France

但是我想在视图中用特殊字符将其分开，在这种情况下，是（（）），然后在同一行的新行中写入下一个名字

所以预期的视图是这样的：

Countries Name :
-----------------
USA,
England,
Germany,
France

注意： -绑定国家/地区名称会在一个字符串行中返回，我一次将这个名称绑定在表中

-我想要一个 <td> ，其中有4条不同的行

Answer 1

用空格分隔div后，您可能会生成不同的countriesName。由于div具有块显示，因此内容将自动占据新行。

我更喜欢这种方法不处理生成的HTML内容（通过使用<br>标签），因为它将需要包含ngSanitize模块。

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.countries = [{
      countriesName: 'USA, England, Germany, France'
    }];
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <table>
    <tbody>
      <tr>
        <td ng-repeat="country in countries">
          <div ng-repeat="line in country.countriesName.split(' ')">
            {{line}}
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

请尝试以下操作：

File

绑定时，AngularJs在特殊字符后换行

2 个答案: