2

我是 Angular.JS 的新手，并试图弄清楚如何正确实现 ng-repeat。

我的范围中有一个数据对象，它是由我的数据库中的 JSON 形成的。返回的“字段”之一有时可以只是一个字符串，也可以是一个数组。

例子：

Email Address = "me@test.com" or
Email Address = ["me1@test.com", "me2@test.com", "me3@test.com"]

我只想在一系列跨度中显示电子邮件地址将包含的任何内容。到目前为止，我已经这样做了：

<span ng-repeat="EMAIL_ADDRESS in data.EMAIL_ADDRESS">
    <span>{{EMAIL_ADDRESS}}</span><br />
</span

对于 3 数组的电子邮件地址，我得到了这个（我想要的）：

    <span>me1@test.com</span><br />
    <span>me2@test.com</span><br />
    <span>me3@test.com</span><br />

对于我得到的只是一个字符串的电子邮件地址：

    <span>m</span><br />
    <span>e</span><br />
    <span>@</span><br />
    <span>t</span><br />
    <span>e</span><br />
    <span>s</span><br />
    <span>t</span><br />
    <span>.</span><br />
    <span>c</span><br />
    <span>o</span><br />
    <span>m</span><br />

我怎样才能防止以后的情况？我知道这是更多的 Javascript 行为，但我不确定如何将它放入 Angular 中。

4

4 回答 4

2

如果您无法更改从数据库返回的对象，或者如果您对多个变量执行此操作，则可以实现一个函数将字符串转换为数组，这将阻止您的 ng-repeat 解析它

一种可能的功能可以直接在您的控制器中实现：

$scope.formatData=function(objectFromDB){
    if(!angular.isArray(objectFromDB))
       return [objectFromDB];
    else
       return objectFromDB;
    }

然后你只需要用你的数据调用函数

<span ng-repeat="EMAIL_ADDRESS in formatData(data.EMAIL_ADDRESS)">
于 2013-07-23T13:37:26.383 回答
1

有角度的方法是在收到数据后对其进行格式化。如果该值是字符串，则将其替换为包含该值的数组。这样，您的模板将收到一致的结果，并且您的控制器逻辑将处理一致的数据结构。

编辑：我也不会将来自服务器的原始返回数据直接绑定到 $scope。我喜欢在服务器和客户端的数据名称/类型之间添加一定程度的分离，以确保将来易于更改并且没有强耦合。

JS：

$http.get('/my/data').success(function(data) {
  //here's where I'd do all the data transformation and binding
  if(angular.isArray(data.EMAIL_ADDRESS)) {
    $scope.emailAddresses = data.EMAIL_ADDRESS;
  else {
    $scope.emailAddresses = [data.EMAIL_ADDRESS];
  }
});

HTML：

<span ng-repeat="emailAddress in emailAddresses">

这样您的模板就不会绑定到服务器 api 返回值/属性

于 2013-07-23T13:22:23.967 回答
0

当您从服务器获取数据时：

EMAIL_ADDRESS = EMAIL_ADDRESS instanceof Array ? EMAIL_ADDRESS : [EMAIL_ADDRESS]
于 2013-07-23T13:28:37.710 回答
0

您可以使用单独的 spans/docs 来显示不同的情况：使用 ngRepeat 表示数组，不使用 ngRepeat 表示简单字符串。

好样的

<div ng-show="isString(data.EMAIL_ADDRESS)">{{data.EMAIL_ADDRESS}}<div><div ng-hide="isString(data.EMAIL_ADDRESS)" ng-repeat="address in data.EMAIL_ADDRESS">{{address}}<div>
于 2013-07-23T13:26:02.977 回答