angular指令笔记ng-options的使用方法


Posted in Javascript onSeptember 18, 2017

1、ng-options指令用途:

在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似,很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处,例如减少内存提高速度,以及提供选择框的选项来让用户选择。当select中一个选项被选择,该选项将会使用ng-model自动绑定到对应数据上。如果你想设一个默认值,可以像这样:$scope.selected = $scope.collection[3]。

1.1  track by的用途:

track by主要是防止值有重复,angularjs会报错。因为angularjs需要一个唯一值来与生成的dom绑定,以方便追踪数据。例如:items=[“a”,“a”,“b”],这样ng-repeat=“item in items”就会出错,而用ng-repeat=“(key,value) in items track by key”就不会出现错误了。

1.2 ng-option使用注意

使用时候,必须加 ng-model 指令,否则无法使用会报错

2、select下拉框中label和value分别代表什么

先写个最简单最原始的select下拉框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>label 和 value 具体是什么</title>
</head>
<body>
  <select>
    <!-- 
      value 是存储到数据库中的值,label是显示在页面上的值 
      value 就是 1、2、3、4这些数值;
      lable 是"语文" “数学”这些
  -->
    <option value="1">语文</option>
    <option value="2">数学</option>
    <option value="3">英语</option>
    <option value="4">生物</option>
  </select>
</body>
</html>

现在引入 angular 使用 ng-options 指令来生成一个下拉框,看下生成页面的代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>label 和 value 具体是什么</title>
  <script type="text/javascript" src="../js/angular-1.3.0.js"></script>
</head>

<body ng-app="myapp">
  <div ng-controller="mainCtrl">
    <select>
      <!-- 
      value 是存储到数据库中的值,label是显示在页面上的值 
      value 就是 1、2、3、4这些数值;
      lable 是"语文" “数学”这些
  -->
      <option value="1">语文</option>
      <option value="2">数学</option>
      <option value="3">英语</option>
      <option value="4">生物</option>
    </select>
    <br>
    <br>
    <br>
    <div>{{ selectedCity }}
      <br>
      <!-- 这里  c.id as c.city for c in obj  我们使用 obj 对象的 id作为select的value,使用obj 的city 作为 select 的label -->
      <select ng-options="c.id as c.city for c in obj" ng-model="selectedCity">
      </select>
    </div>
  </div>


  <script type="text/javascript">
  var myapp = angular.module('myapp', []);
  myapp.controller('mainCtrl', ['$scope', function($scope) {
    $scope.selectedCity = "bj";
    $scope.obj = [
      { "id": "bj", "city": "北京" },
      { "id": "sh", "city": "上海" },
      { "id": "zz", "city": "郑州" }

    ];
  }])
  </script>
</body>

</html>

看下预览的页面效果,在后面添加的使用 ng-options 生成的select中,我们使用 obj 对象的 id作为select的value,使用obj 的city 作为 select 的label

angular指令笔记ng-options的使用方法

3、三种ng-options常用方法: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>label 和 value 具体是什么</title>
  <script type="text/javascript" src="../js/angular-1.3.0.js"></script>
  <style type="text/css">
  .mart30 {
    margin-top: 30px;
    border-top: 1px solid #000;
  }
  </style>
</head>

<body ng-app="myapp">
  <div ng-controller="mainCtrl">
    <select>
      <!-- 
      value 是存储到数据库中的值,label是显示在页面上的值 
      value 就是 1、2、3、4这些数值;
      lable 是"语文" “数学”这些
  -->
      <option value="1">语文</option>
      <option value="2">数学</option>
      <option value="3">英语</option>
      <option value="4">生物</option>
    </select>
    <div class="mart30">
      <h3>演示 label 和 value 值的变化</h3> {{ selectedCity }}
      <!-- 这里  c.id as c.city for c in obj  我们使用 obj 对象的 id作为select的value,使用obj 的city 作为 select 的label -->
      <select ng-options="c.id as c.city for c in obj1" ng-model="selectedCity">
      </select>
    </div>
    <div class="mart30">
      <h3>1. “数组”实现基本下拉</h3>
      <p>语法: laber for value in array</p>
      <select ng-options="animal for animal in arr1" ng-model="selectedAnimal"></select>
      <br>
    </div>
    <div class="mart30">
      <h3>2. “包含对象的数组”实现“label 和 value值不同”的下拉</h3>
      <p>语法: select as label for value in array</p>
      <p>哪位同学你认识?你的选择是:{{selectedStu}}</p>
      <select ng-options="c.name as c.id for c in obj2" ng-model="selectedStu"></select>
      <br>
      <br>
      <br>
      <p><strong>自定义下拉显示内容格式</strong></p>
      <p>哪位同学你认识?你的选择是:{{selectedStuString}}</p>
      <p>语法:拼接字符串</p>
      <select ng-options="c.name as (c.name +'- 英文名:'+c.id) for c in obj2" ng-model="selectedStuString"></select>
      <br>
      <br>
      <br>
      <p><strong>使用group by对下拉菜单分组</strong></p>
      <p>语法:label group by groupName for value in array</p>
      <p>哪位同学你认识?你的选择是:{{selectedStuString2}}</p>
      <select ng-options="c.name group by c.sex for c in obj2" ng-model="selectedStuString2"></select>
    </div>
    <div class="mart30">
      <h3>3. “对象”实现基本下拉</h3>
      <p>语法 1: label for (key , value) in object</p>
      <p>哪个城市?你的选择是:{{scity}}</p>
      <select ng-options="key for (key , value) in obj3" ng-model="scity"></select>
      <p>语法 2: select as label for (key ,value) in object</p>
      <p>哪个城市?你的选择是:{{scity01}}</p>
      <select ng-options="value as key for (key , value) in obj3" ng-model="scity01"></select>
    </div>
  </div>
  <script type="text/javascript">
  var myapp = angular.module('myapp', []);
  myapp.controller('mainCtrl', ['$scope', function($scope) {
    //定义包含对象的数组 obj1
    $scope.obj1 = [
      { "id": "bj", "city": "北京" },
      { "id": "sh", "city": "上海" },
      { "id": "zz", "city": "郑州" }
    ];
    $scope.selectedCity = "bj";

    // 定义数组
    $scope.arr1 = ["大白", "阿狸", "熊猫"];
    //定义默认为 “大白”
    $scope.selectedAnimal = "大白";

    //定义包含对象的数组 obj2
    $scope.obj2 = [
      { "id": "lilei", "name": "李雷", "sex": "man" },
      { "id": "hanmeimei", "name": "韩梅梅", "sex": "woman" },
      { "id": "jack", "name": "杰克", "sex": "man" }
    ];
    $scope.selectedStu = "韩梅梅";

    //定义简单对象 obj3
    $scope.obj3 = {
      "湖北": "鄂",
      "广东": "粤",
      "河南": "豫"
    };
  }])
  </script>
</body>

</html>

关于对象使用方法中 key 和 value 的一点说明

angular指令笔记ng-options的使用方法

4、ng-options 全部用法补充

 标红部分在代码中已有例子,其余的请自行消化理解测试

对于数组:

  • label for value in array
  •  select as label for value in array
  •  label group by group for value in array
  •  label disable when disable for value in array
  •  label group by group for value in array track by trackexpr
  •  label disable when disable for value in array track by trackexpr
  •  label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)

对于对象:

  • label for (key , value) in object
  •  select as label for (key ,value) in object
  •  label group by group for (key,value) in object
  •  label disable when disable for (key, value) in object
  •  select as label group by group for(key, value) in object
  •  select as label disable when disable for (key, value) in object

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
React路由管理之React Router总结
May 10 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
如何基于JS截获动态代码
Dec 25 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
javascript  删除select中的所有option的实例
Sep 17 #Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 #Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 #Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 #Javascript
基于js的变量提升和函数提升(详解)
Sep 17 #Javascript
利用express启动一个server服务的方法
Sep 17 #Javascript
You might like
php接口和抽象类使用示例详解
2014/03/02 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
python 实现return返回多个值
2019/11/19 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
零基础学python应该从哪里入手
2020/08/11 Python
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
领导干部培训感言
2014/01/23 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
关键在于落实心得体会
2014/09/03 职场文书
初中班主任教育随笔
2015/08/15 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技