angular之ng-repeat

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

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

离第一次接触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 : ‘image/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>

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

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

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

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

时间: 2024-08-03 01:55:27

angular之ng-repeat的相关文章

Angular(ng表单指令操作)

html部分 ................................................. <!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>Angular(ng表单指令操作)</title> <script src="js

Part 6 AngularJS ng repeat directive

ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we want to do. 1. For each employee we have in the employees array we want a table row. With in each cell of the table row we to display employee Firstna

angular Error: [ng:areq]

在使用augularjs的时候,爆了个错误: 后来经过对比,原来是我的<html>标签多了点东西

.Net Core + Angular Cli 开发环境搭建

一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul

angular模块

在angular中,模块可以是一个对象.一个方法或一个数组(数组的最后一个元素必须是方法).后面要讲的模块属性和方法,都是针对通过angular.module()方法定义的模块而言的,我称之为angular模块. 通过angular.module()方法定义的模块是唯一的,如果重复定义,后面的就会覆盖前面的定义.不是通过angular.module()定义的模块,比如一个方法或一个数组,这些模块也是唯一的,但是这些模块一旦定义无法被修改. angular模块可以说是一个空对象,因为它本身不包含任

ng 依赖注入

将依赖的对象注入到当前对象,直接去使用依赖的对象即可. 降低耦合度.提高开发速度.. 文件压缩:yui-compressor有两种方案:①CLI(command line interface)java -jar **.jar **.js > **.min.js②webStormfile->settings->tools-->fileWatchers->点击+ ->选中yui compressor js-->设置program(点击按钮在弹窗中选中C盘根目录下的js

Angular实现递归指令 - Tree View

在层次数据结构展示中,树是一种极其常见的展现方式.比如系统中目录结构.企业组织结构.电子商务产品分类都是常见的树形结构数据. 这里我们采用Angular的方式来实现这类常见的tree view结构. 首先我们定义数据结构,采用以children属性来挂接子节点方式来展现树层次结构,示例如下: [ { "id":"1", "pid":"0", "name":"家用电器", "ch

使用ng serve 在Vs Code里调试 anguar 项目

ng serve 是@angular/cli 下的运行命令 我们可以通过下载@angular/cli来生成angular2的模板 npm install -g @angular/cli ng new Anguar-Example --默认会下载依赖包 cd Angura-Example npm install --如果下载了依赖包这步可以不做 ng serve --运行angular 或 npm start 运行项目 默认通过http://localhost:4200/ 访问. 如果我们想用VS

Angular injector注入器

<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title></head><body><div ng-co

Grunt + Bower + Requirejs + Angular

http://www.tuicool.com/articles/ENbI7j3 时间 2014-07-27 22:08:46  Freewind.me原文  http://freewind.me/blog/20140727/2739.html 现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可重用的Js代码,并共享构建工具.但很多时候我们可能采用别