Angular.JS ng-repeat分解字符串

时间:2013-07-23 13:15:44

标签: javascript angularjs angularjs-ng-repeat

我是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 个答案:

答案 0 :(得分: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)">

答案 1 :(得分: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返回值/属性

答案 2 :(得分:0)

您可以使用单独的跨度/文档来显示不同的情况:使用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>

答案 3 :(得分:0)

从服务器获取数据时:

EMAIL_ADDRESS = EMAIL_ADDRESS instanceof Array ? EMAIL_ADDRESS : [EMAIL_ADDRESS]