angular之ng-repeat

发布时间:2020-07-01 23:53:20 作者:丸子小天地
来源:网络 阅读:1485

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

提示:个人意见,请各位帮我纠错,谢谢!

离第一次接触angular已经好久了。这些天也一直没有用过,今天突然用感觉生疏了不少。本以为ng-repeat我是肯定没有问题的,不过今天中午就因为ng-repeatservice整了我一下午,终于我对其了解了一点点。一个控制器模块里面可以有多个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,告诫大家,千万不要像我这样写!!

以下的代码为错误示范:

<div class="col-md-10 userLikeGoods" ng-controller="managerMenuCtrl">
   <ul>
      <li ng-repeat="i in date.userLikeGoods" class="userLikeGoods-img"><img src="{{i.img}}"></li>
      <li ng-repeat="i in date.userLikeGoods" class="userLikeGoods-price">
         <span class="font_2">{{i.price | number:2}}</span>
      </li>
      <li ng-repeat="i in date.userLikeGoods" class="userLikeGoods-describe">
         <span class="font_3" style="display: block">{{i.goodsDescribe}}</span></li>
   </ul>
</div>

是不是看起来人畜无害,十分正常?错!!!是我的错!

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

<ul ng-repeat="item in date">
   <li ng-repeat="i in item.userLikeGoods" class="userLikeGoods-img"><img src="{{i.img}}"></li>
   <li ng-repeat="i in item.userLikeGoods" class="userLikeGoods-price">
      <span class="font_2">{{i.price | number:2}}</span>
   </li>
   <li ng-repeat="i in item.userLikeGoods" class="userLikeGoods-describe">
      <span class="font_3" style="display: block">{{i.goodsDescribe}}</span></li>
</ul>

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

angular之ng-repeat 

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

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


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


推荐阅读:
  1. Cordova学习笔记   angular controller及ng-repeat指定的使用
  2. Angular之Rxjs基础操作

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

自己 小小见解 repe

上一篇:bootstrap-带表单的导航条

下一篇:lower_case_table_names=0 没毛病

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》