angular遇到问题的处理

1.angular js的遍历

在传递数据的时候,经常会用到对数据的处理,尤其是数据的遍历
** angular.foreach**

var objs =[{a:”a1”},{a:”a2”}];
 
 angular.forEach(objs, function(data,index,array){
 
 //data等价于array[index]
 
 console.log(data.a+'='+array[index].a);
 
});

objs:需要遍历的集合
data:遍历时当前的数据 (值) //a1,a2……
index:遍历时当前索引 //1,2,3……
array:需要遍历的集合,每次遍历时都会把objs原样的传一次,也可以不用写后面两个参数。

2.angular js的判断

在html页面中,有时候需要根据条件展示数据。
** ng-if让数据的展示可以依赖于某个条件**

<a href="javascript:;" class="margin-r10" ng-click="goOff(row)" ng-if='row.status=="展示中"'> 下线</a>

<a href="javascript:;" class="margin-r10" ng-click="goOn(row)" ng-if='row.status=="未上线"'> 上线</a>

3.过滤器

接收输入数据,通过过滤器按照某个规则处理后返回结果
可以在模版中使用,也可以在控制器中应用
模版中 {{要表示的表达式|过滤器名称[:参数]}}
控制器中通过依赖注入 $filter

内置过滤器
1 .date(日期格式化) var dateFilter=$filter(‘date’);----------比较常用
dateFilter(date, 'yyyy-MM-dd HH:mm:ss')
第一个参数表示要格式化的对象,第二个参数表示格式化的格式

自定义过滤器
写一个 filter方法

app.filter(‘过滤器名’,function(){
  return function(输入的参数){  //闭包
 
  /*函数体*/ 
  return  返回结果
  }
})

4.全局变量

  1. 通过var 直接定义global variable,这跟纯js是一样的。
  2. 用angularjs value来设置全局变量 。
  3. 用angularjs constant来设置全局变量

5.ng-repeat 报错问题

控制台报错以下:
[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys

发现是因为相同的内容重复引起,解决方案:
在ng-repeat后面加上 track by $index
ng-repeat="word in words track by $index"
**$index **是循环的时候,元素的下标,从0 开始

6.$http服务

$http服务是接受一个对象参数的函数,这个对象包含的是一些生成HTTP请求的配置,返回一个promise对象,具有success和error两个函数,可以通过链式调用。
$http 参数是一个对象,包括有:url: , method: ,params: 这个键的值是一个字符串map或对象,会被转换成查询字符串追加在URL后面 ( 发送GET请求时使用), data: 发送给服务器的数据 (发送POST请求时使用) ,

返回的是一个promise对象,
1.success和error函数

      $http({
            url: " url.json",
           method:"GET"
            }).success(function(){  
             //响应成功
           }).error(function(){             //响应失败 
            })

2.通过then方法处理,参数是两个函数

         $http({
              url: " url.json",
              method:"GET"
            }).then(function(){
               //响应成功
             },function(){
              //响应失败 
           })

7.ng-options的参数情况

例:javascript

$scope.School = [
{
            "id": 27,
            "name": "北京大学",
            "status": 0,
   "city":"北京"
        },
        {
            "id": 29,
            "name": "北京交通大学",
            "status": 0,
   "city":"北京"
        },
        {
            "id": 1,
            "name": "哈尔滨工业大学(威海)",
            "status": 0,
   "city":"哈尔滨"
        },
        {
            "id": 10,
            "name": "哈尔滨工业大学",
            "status": 0,
   "city":"哈尔滨"
        },
        {
            "id": 11,
            "name": "哈尔滨工程大学",
            "status": 0,
   "city":"哈尔滨"
        }
    ]

html
<1> 基本下拉菜单 label for value in array

<select ng-model="Select1" ng-options="s.name for s in School">
 <option value="">-- 请选择 --</option>
</select>

这里表达式中的value即这里是m 代表的是在School数组中每次取出一个元素
label即这里的s.name 就是输出的显示结果

<2>自定义下拉菜单 label for value in array

<select ng-model="Select2" ng-options="(s.id+'-'+s.name) for s in School">
 <option value="">-- 请选择 --</option>
</select>

这里表达式中的value即这里是m 代表的是在School数组中每次取出一个元素
label即这里的 (s.id+'-'+s.name) 就是输出的显示结果(可自定义输出样式)

< 3>群组下拉菜单 label group by group for value in array

<select ng-model="Select3" ng-options="(s.id + ' - ' + s.name) group by s.city for s in School">
 <option value="">-- 请选择 --</option>
</select>

显示结果如下:
表达式的by group即这里的 s.city 代表 用这个属性作为条件来筛选群组

<4>自定 select 的 ngModel 的值 select as label for value in array

<select ng-model="Select4" ng-options="s.id as s.name for s in School">
<option value="">-- 请选择 --</option>
</select>

select as label: label代表的是显示的值,而select指的是当前返回值
如果当前选中的是“北京大学”, $scope.Select4=27

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,590评论 18 139
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,583评论 0 3
  • 这个只是Markdown入门啦,后面还有好多要学的,是标记语言的一种。 分割线 来玩玩分割线 哦,这个 好玩 代码...
    Silly_N_Fool阅读 202评论 0 0
  • 补心清肺、止热嗽,治喉病。 百沸汤中食,清肺火,解阳明结热。 中国民间有立夏食用鸭蛋补夏的习俗,立夏这天,家里的长...
    一只好coffee阅读 471评论 2 8
  • 1、- (void)applicationWillResignActive:(UIApplication *)ap...
    信仰支撑我不会痛阅读 4,186评论 0 10