Angular.JS ng重复打断一根绳子
Angular.JS ng-repeat breaking apart a string
我是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中。
如果你不能更改数据库中返回的对象,或者如果你必须对多个变量进行更改,你可以实现一个函数将字符串转换为数组,这将防止你的ng重复解析它
一个可能的功能可以直接在您的控制器中实现:
$scope.formatData=function(objectFromDB){
if(!angular.isArray(objectFromDB))
return [objectFromDB];
else
return objectFromDB;
}
然后你只需要用你的数据调用函数
<span ng-repeat="EMAIL_ADDRESS in formatData(data.EMAIL_ADDRESS)">
角度方法是在收到数据后对其进行格式化。如果该值是字符串,请将其替换为包含该值的数组。这样,您的模板将获得一致的结果,控制器逻辑将处理一致的数据结构。
编辑:我也不会将服务器的原始返回数据直接绑定到$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返回值/属性
您可以使用单独的spany/docs来显示不同的情况:对于数组使用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>
当您从服务器获取数据时:
EMAIL_ADDRESS = EMAIL_ADDRESS instanceof Array ? EMAIL_ADDRESS : [EMAIL_ADDRESS]
相关文章:
- ACE编辑器正在删除模块,因为define是't一根绳子
- 有没有一种方法可以在设计模式下将ng模型或工厂绑定到iframe
- ng show和ng hide don'I don’我一秒钟都不工作
- ng模型一次更改所有select
- 有没有一种方法可以使用angular中的$index作为ng重复中的模型
- ng在一页中包含两次相同的部分页面
- 角度ng重复一次
- Css在每行的底部放了一整行,有角度ng重复
- ng只重复添加项目一次
- 为什么“i”会成为循环中的一根字符串
- 将一根细绳从烧瓶中传给angularjs
- 一根绳子可以有回文吗,有没有更好的方法可以做到这一点
- d3.行为缩放 仅使用一根手指时禁用触摸屏上的平移
- Angular.JS ng重复打断一根绳子
- 什么是稳健的&这是一种很好的方式,可以循环穿过一根绳子,把它的一部分刮下来
- 为什么我的$variable放在再培训局时就像一根绳子
- 如何把一根绳子分成几组
- 我怎样才能把一根弦变成一把钥匙
- 把一根绳子切成一根绳子
- D3 条形图 - 最后一根柱线悬在 X 轴的末端