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

站长资源 2024/11/28 佚名

2 0 1

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="/UploadFiles/2021-04-02/angular-1.3.0.js">

看下预览的页面效果，在后面添加的使用 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="/UploadFiles/2021-04-02/angular-1.3.0.js">

关于对象使用方法中 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

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

angular,ng-options,angular,ng-options使用,angular,ng,options

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“angular指令笔记ng-options的使用方法”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

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

angularjs实现猜数字大小功能

jQuery UI 实例讲解 - 日期选择器(Datepicker)

评论“angular指令笔记ng-options的使用方法”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接