angular之ng-repeat-创新互联

第一次写，希望大家不要喷，嘻嘻，毕竟我是小菜鸟。

创新互联是一家专业提供西峡企业网站建设,专注与成都网站设计、网站制作、html5、小程序制作等业务。10年已为西峡众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

提示：个人意见，请各位帮我纠错，谢谢！

离第一次接触angular已经好久了。这些天也一直没有用过，今天突然用感觉生疏了不少。本以为ng-repeat我是肯定没有问题的，不过今天中午就因为ng-repeat、service整了我一下午，终于我对其了解了一点点。一个控制器模块里面可以有多个controller,我以为service同理，天真的我在服务模块里面写了两个service，结果一直不正确。于是我发动我脑子里的想法，我在想：是不是要在服务模块里面写两个module？于是我按照这个想法继续写，结果发现错得离谱！愚蠢的我终归只能将两个service合并到一起，声明一个对象，但是记得返回对象！！！而且这种情况就嵌套了，一定要注意各种括号！

以下是我写的service部分：

angular.module('userServiceModel',[])
    .service('userService', function () {
        var date = [
            {userMenu : [
                {text:'用户管理',
                    enabled:false,
                    subMenu:[
                        {text:'显示用户',
                            enabled:false,
                            action:'manager-userList'
                        }
                   ]
                }]
            },
                { userLikeGoods:[
                    {
                        img : 'p_w_picpath/00.jpg',
                        price : 199,
                        goodsDescribe : '因为我不知道要写什么所以我就不写了'
                    }
                ]}
            ];
        return date;
    });

为了阅读方便于是我就不写那么多了，反正也是堆代码。

这下把service部分的问题解决了，于是我窃喜：这下总是能一下子循环出来了吧！然并卵！！！回到html，告诫大家，千万不要像我这样写！！

以下的代码为错误示范：

是不是看起来人畜无害，十分正常？错!错!错!是我的错！

没有经过遍历，date的第一层皮没被扒掉，怎么能看到第二层？？？于是我只能先把它的第一层皮扒掉，如下：

"item in date">
   
• "i in item.userLikeGoods"class="userLikeGoods-img">"{{i.img}}">

   
• "i in item.userLikeGoods"class="userLikeGoods-price">
        "font_2">{{i.price | number:2}}
     

   
• "i in item.userLikeGoods"class="userLikeGoods-describe">
        "font_3"style="display:block">{{i.goodsDescribe}}

于是我想要的结果终于出来了，可是乐极生悲，我的另一个页面又出了问题，蓝瘦香菇...

为嘛我美美的管理界面成了这个鬼样子？多出来的蓝条是什么？于是，我再次陷入问题，啊哈我找到了，这是我遍历date对象第一层之后的后遗症！目前还没有解决，呜呜..明天接着努力！

如果大家发现有问题一定要告诉我...康桑哈米达~

还有欢迎大家关注我的微信公众号：丸子的小天地

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。

本文标题：angular之ng-repeat-创新互联
分享路径：http://cdxtjz.cn/article/ccieij.html