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

2024-12-07 16:13:04

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

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 的一点说明

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

AngularJS实现在ng-Options加上index的解决方法

本文实例讲述了AngularJS实现在ng-Options加上index的解决方法.分享给大家供大家参考,具体如下: Angularjs交流群中有位童学问道如何为Angular select的ng-Options像Angularjs的ng-Repeat一样加上一个索引$index. 其实对于这个问题来说Angular本身并未提供$index之类的变量供使用.但是也不是说对于这个问题我们就没有解决方案. 把这个问题换成角度来看,我们所需要的就是js数组的下标,所以我们如果我们能够在对象上加入下标,
AngularJS学习笔记之ng-options指令

1.基本下拉效果(lable for value in array) 其中select标签中的ng-model属性必须有,其值为选中的对象或属性值. <div ng-controller="ngselect"> <p>usage:label for value in array</p> <p>选项,{{selected}}</p> <select ng-model="selected" ng-opti
AngularJS实现select的ng-options功能示例

本文实例讲述了AngularJS实现select的ng-options功能.分享给大家供大家参考,具体如下: controller .controller('MainController', function($scope, $http, $ionicModal, $timeout) { var post = {}; $http.get("data/themeData.json") .success(function(response) { $scope.themeData = res
Angular中ng-options下拉数据默认值的设定方法

今天学习了一下Angular中ng-options下拉数据默认值的设定方法,留个笔记直接上代码 <div class="form-group"> <label class="col-sm-2 control-label">教师</label> <div class="col-sm-10"> <select style="display:block; width:100%; heig
详解使用angularjs的ng-options时如何设置默认值(初始值)

这两天我用ng-options过程中遇到的初始值为空白的问题,记得去年就遇到过,怎么解决的忘记了,费了一阵子功夫之后解决了,想记下来,方便遇到同样问题的小伙伴当然还有自己. 1.场景: 就是做一个查询列表的弹窗,其中有一个条件需要用到下拉菜单,数据是用过ajax传递过去的. 2.实现: a.html: <select ng-model="myselect" ng-options="o for o in options"></select> b
AngularJS基础 ng-options 指令详解

AngularJS ng-options 指令 AngularJS 实例使用数组元素填充下拉列表: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>
AngularJS使用ng-options指令实现下拉框

ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值: 另一个是ng-options用于确定下拉列表的元素数组. 1.问题背景一般情况下,select下都会有option,但是AngularJS中有指令ng-options,就可以实现select下拉框 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>
AngularJS动态绑定ng-options的ng-model实例代码

什么情况下会需要动态绑定 ng-model 呢?若你的数据结构长得像是下面这样: var Classes = [ { "Name" : "温度 " , "Options" : [ "Cold" , "Hot" , "Normal" ]}, { "Name" : "份量 " , "Options" : [ "Big&qu
angular指令笔记ng-options的使用方法

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

先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴
Angular学习笔记之集成三方UI框架、控件的示例

本文介绍了Angular学习笔记之集成三方UI框架.控件的示例,分享给大家,具体如下: 安装 Material UI 方法: Material 官网:https://material.angular.io step 1: npm install --save @angular/material @angular/cdk step 2: npm install --save @angular/animations step 3: angular.cli ../node_modules/@angul
从源码看angular/material2 中 dialog模块的实现方法

本文将探讨material2中popup弹窗即其Dialog模块的实现. 使用方法引入弹窗模块自己准备作为模板的弹窗内容组件在需要使用的组件内注入 MatDialog 服务调用 open 方法创建弹窗,并支持传入配置.数据,以及对关闭事件的订阅深入源码进入material2的源码,先从 MatDialog 的代码入手,找到这个 open 方法: open<T>( componentOrTemplateRef: ComponentType<T> | TemplateRef
AngularJS框架的ng-app指令与自动加载实现方法分析

本文实例分析了AngularJS框架的ng-app指令与自动加载实现方法.分享给大家供大家参考,具体如下: ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载.也就是说,ng-app是可以带属性值的.如果想要实现自动加载,那么就不能让ng-app带有属性值. <html> <body ng-app> <div>div1:{{1+3*2}}</
AngularJS实现自定义指令与控制器数据交互的方法示例

本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3
angular源码学习第一篇 setupModuleLoader方法

angular源码其实结构非常清晰,划分的有条有理的,大概就是这样子: (function(window,document,jquery,undefined){ //一些工具函数 //EXPR 编译器自执行 //setupModuleLoader方法,公司内部的框架是vxsetup方法,(只是定义,没有调用) //moduler方法() //angular初始化方法,公司内部的框架是vxinit方法 //bootstrap //createInjector //一系列指令,服务,过滤器等指令
使用Angular 6创建各种动画效果的方法

就技术角度而言,动画可以被定义为从初始状态到最终状态的转换过程.如今它已是各种Web应用不可或缺的组成部分.通过动画,我们不仅能创建出各种酷炫的UI,同时它们也能增加应用程序的趣味性.因此,设计精美的动画在吸引用户眼球的同时,也增强了他们的浏览体验. Angular能够让我们创建出具有原生表现效果的动画.我们将通过本文学习到如何使用Angular 6来创建各种动画效果.在此,我们将使用Visual Studio Code来进行示例演示. 准备工作安装Visual Studio Code和Ang
Angular父组件调用子组件的方法

理解组件组件是一种特殊的指令,使用更简单的配置项来构建基于组件的应用程序架构这样他能简单地写app,通过类似的web Component 或者angular2的样式. web Component 是一个规范.马上就要成为标准. 应用组件的优点: 比普通指令配置还简单提供更好的默认设置和最好的实践对基于组建的应用架构更优化. 对angular2的升级更平滑. 不用组建的情况: 对那些在 compile或者pre-link阶段要执行操作的指令,组件不能用,因为无法到达那个阶段. 如果你想定义
Web开发使用Angular实现用户密码强度判别的方法

Web前端使用Angular实现用户密码强度判别小记用户密码合法条件: 1.8~16个字符 2.只能包含数字,字母和"_" "."(即不能含有非法特殊字符) 3.数字,字母和"_" "." 至少包含两种实现过程: 长度检测-注:要区分中文和英文,中文两个字节,英文一个字节,在密码输入的时候是不能输入中文,但在检测用户名的使用,就需要区分中英文 // 获取字符串长度:中文也可正常获取 function GetStrLengt

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

相关推荐

随机推荐