Hacking with Angular: 玩转ngOptions指令

比特织云鹤
• 阅读 8777

首先说说为什么要详细的了解一下这个指令,因为在工作中总是遇到关于下拉选项的一些操作,但是又常常会出现一些问题;基本会遇到下面一些问题:

  • 关于下拉框使用ng-repeat或者ng-options指令的区别

  • 关于下拉框的默认选项如何设置

  • 关于下拉框选项的model值如何绑定

  • 关于下拉框的禁用选项问题

  • 关于下拉框的分组问题

  • 关于下拉框的排序问题

下面我们就来好好的研究一下ng-options,下面的部分就是关于上面问题的解决方案。
关于下面的例子详见demo原文链接


下面的部分没有太按照上面的问题的顺序,但是他们的解决方法都在里面有提及。

下拉框的默认选项一般是可以通过使用ng-init指令或者在控制器中对selectmodel值进行赋值来达到这个目的的。
关于使用ng-repeat还是ng-options的选择,当我们的下拉列表循环的只是一些简单的字符串或者数字的时候,使用这两个指令都是可以的;但是当我们下拉列表循环的是一些比较复杂的数据并且还有一些附带的其它要求的时候,我们应该使用ng-options

  • 使用select结合ng-repeat指令组成一个含有默认值的下拉列表。

    • HTML部分

      <select ng-init="vm.item1 = vm.items1[0]"
              ng-model="vm.item1">
          <option ng-selected="v == vm.items1[0]"
                  value="{{v}}"
                  ng-repeat="v in vm.items1">
              {{v}}
          </option>
      </select>
    • JavaScript部分

      vm.items1 = [
                '选项一',
                '选项二',
                '选项三'
            ];

      我们使用ng-repeat指令对下拉列表的值进行循环,然后使用ng-initselectmodel进行初始化。

  • 使用ng-options达到和上面一样的效果

    • HTML部分

         <select ng-model="vm.item2"
                 ng-init="vm.item2 = vm.items2[0]"
                 ng-options="v for v in vm.items2">
        </select>
    • JavaScript部分

      vm.items2 = [1,2,3];

      下面的部分具体的讲解ng-options指令后面使用的复杂的表达式,还需要注意的是,我们使用的是数组作为下拉列表的输出,当然也可以使用对象,详情可以参考官网

  • select as label for value in array

    • 首先说明一下上面的表达式中每一项表示的是什么;array表示的是我们要进行循环的对象数组,
      value表示这个数组中的单独一项,也就是一个单独的对象,selectlabel都是对象中的某一个属性,其中select还可以表示整个对象;label表示的是下拉框中的显示的选项,select表示下拉框中选中某一个label之后下拉框的model的值。通俗一点说就是,label只是下拉框中表现出来让你选择的选项,而select是你选中那个选项之后,下拉列表的值

    • HTML部分

      <select ng-init="vm.item3 = vm.items3[0].value"
          ng-options="v.value as v.name for v in vm.items3"
          ng-model="vm.item3">
      </select>
    • JavaScript部分

          vm.items3 = [
              {name: '选项一', value: 1},
              {name: '选项二', value: 2},
              {name: '选项三', value: 3}
          ];
    • 解释一下上面的一些内容,其中ng-model="vm.item3"指定了这个下拉框的model值,我们使用ng-init进行下拉框的初始化ng-init="vm.item3 = vm.items3[0].value",关于ng-options="v.value as v.name for v in vm.items3"我们来看一下,其中v表示数组中的单个对象,as左边的值是我们的下拉框选中时的值,as右边的值是下拉框表面表示选择项。在这个例子中,我们会看到下拉框给我们的选项是选项一选项二选项三,但是当我们选中选项一的时候实际上下拉框的值是1也就是v.value

  • label group by group for value in array

    • group by group的解释,其中前面的group by是固定的,后面的group使我们分组的依据。

    • HTML部分

      <select ng-init="vm.item4 = vm.items4[0]"
                    ng-options="v.name group by v.group for v in vm.items4"
                    ng-model="vm.item4">
       </select>
    • JavaScript部分

      vm.items4 = [
               {name: '选项一', value: 1, group: 'A'},
               {name: '选项二', value: 2, group: 'A'},
               {name: '选项三', value: 3, group: 'A'},
               {name: '选项四', value: 4, group: 'B'},
               {name: '选项五', value: 5, group: 'B'},
               {name: '选项六', value: 6, group: 'C'},
               {name: '选项七', value: 7, group: 'C'}
           ];
    • 页面中的表现如下图:
      Hacking with Angular: 玩转ngOptions指令 关于上面代码的一些解释,可以从上图看到,只要我们把分组的信息写好,angular会帮助我们处理好分组的事情。

  • select as label disable when disable for value in array

    • disabled when disableddisabled when是固定的语句,后面的disabled是一个条件,如果条件是true的话,那么这一项是不可以被选中的。

    • HTML部分

      <select ng-init="vm.item5 = vm.items5[0].value"
                    ng-options="v.value as v.name disable when v.show for v in vm.items5"
                    ng-model="vm.item5">
       </select>
    • JavaScript部分

      vm.items5 = [
                {name: '选项一', value: 1},
                {name: '选项二', value: 2, show: true},
                {name: '选项三', value: 3},
                {name: '选项四', value: 4, show: true},
                {name: '选项五', value: 5}
            ];
    • 页面中的表现如下:
      Hacking with Angular: 玩转ngOptions指令 可以看到,选项二和选项四是禁用的。

  • label disable when disable for value in array

    • HTML部分

              <select ng-init="vm.item6 = vm.items6[0]"
                            ng-options="v.name disable when v.show for v in vm.items6"
                            ng-model="vm.item6">
               </select>
    • JavaScript部分

      vm.items6 = [
               {name: '选项一', value: 1},
               {name: '选项二', value: 2, show: true},
               {name: '选项三', value: 3},
               {name: '选项四', value: 4, show: true},
               {name: '选项五', value: 5}
           ];
    • 这个例子和上面的很相似,但是还是有一些区别的;这个例子的下拉框的model值是一个对象,上面那个例子的下拉框的model只是一个数字;从哪里可以看出来呢?因为两个ng-options指令后面的表达式是不一样的,如果表达式中使用了as关键字的话那么as左边的表达式的值就是我们的下拉框的model值,如果不使用的话,默认的就是我们数组中的某一项的值,在此处是一个对象。

  • label for value in array track by trackexpr

    • track by是用来识别数组中的每个对象的,当这个数组再次被重新创建或者更新的时候的时候,已经选择的选项会被保留下来,也就是说,会保留每一项当时选择的状态

    • HTML部分(未使用track by)

                <select multiple
                        ng-init="vm.item7 = []"
                        ng-options="v.name for v in vm.items7"
                        ng-model="vm.item7">
                </select>
    • JavaScript部分(未使用track by)

      vm.items7 = [
                {name: '选项一', value: 1, id: 1},
                {name: '选项二', value: 2, id: 2},
                {name: '选项三', value: 3, id: 3},
                {name: '选项四', value: 4, id: 4},
                {name: '选项五', value: 5, id: 5}
            ];
    • JavaScript部分,公用的函数changeItems部分

           function changeItems() {
                vm.items7 = [
                    {name: '选项一', value: 1, id: 1},
                    {name: '选项二', value: 2, id: 2},
                    {name: '选项三', value: 3, id: 3},
                    {name: '选项四', value: 4, id: 4},
                    {name: '选项五', value: 5, id: 5},
                    {name: '选项6', value: 6, id: 6}
                ];
                vm.items8 = [
                    {name: '选项一', value: 1, id: 1},
                    {name: '选项二', value: 2, id: 2},
                    {name: '选项三', value: 3, id: 3},
                    {name: '选项四', value: 4, id: 4},
                    {name: '选项五', value: 5, id: 5},
                    {name: '选项6', value: 6, id: 6}
                ];
            }
    • HTML部分

                <select multiple
                        ng-init="vm.item8 = []"
                        ng-options="v.name for v in vm.items8 track by v.id"
                        ng-model="vm.item8">
                </select>
    • JavaScript部分

      vm.items8 = [
                {name: '选项一', value: 1, id: 1},
                {name: '选项二', value: 2, id: 2},
                {name: '选项三', value: 3, id: 3},
                {name: '选项四', value: 4, id: 4},
                {name: '选项五', value: 5, id: 5}
            ];
    • 我们使用了下拉框的多选模式,这样就可以更清楚地看到我们说的为什么要使用track by这个关键字的原因,在demo7中,我们没有使用track by,我们将demo7下拉框的model值初始化为一个数组,并且有一个辅助的函数changeItems,模拟下拉框的选项变化;当我们选中一些选项后,点击更新按钮,会发现之前的选择已经被清零了;当是当我们使用了track by之后,就像demo8中的示例那样,当我们选中了一些选项之后,再次点击更新按钮,会发现之前选择的选项依旧还是存在的。

  • label for value in array | orderBy : expr track by trackexpr

    • 我们也可以在后面的表达式语句中使用orderBy过滤器,使用过滤器的好处是,让下拉框的选项按照我们的要求进行进行排列,让我们使用起来更加方便。

    • HTML部分

              <select ng-init="vm.item9 = vm.items9[vm.items9.length - 1]"
                      ng-options="v.name for v in vm.items9 | orderBy: ['value'] track by v.id"
                      ng-model="vm.item9">
              </select>
    • JavaScript部分

       vm.items9 = [
              {name: '选项一', value: 5, id: 1},
              {name: '选项二', value: 4, id: 2},
              {name: '选项三', value: 3, id: 3},
              {name: '选项四', value: 2, id: 4},
              {name: '选项五', value: 1, id: 5}
          ];
    • 首先我们的数据部分和上面的不一样,我们将数据中的value部分进行了倒序,然后又在表达式中使用orderBy过滤器,并且按照value值进行排序;关于orderBy过滤器的使用方法可以参考官网。还要注意的是,我们也给这个下拉框的model初始化了一个值,不然这个下拉框会有一个空白的选项,给用户的的体验很不好;当然我们也是根据数据的特征使用了ng-init="vm.item9 = vm.items9[vm.items9.length - 1]"进行初始化。

关于下拉框要循环的是对象的情况基本上和上面的差不多,大家可以自行看官网上的说明,好了就先到这里了。

点赞
收藏
评论区
推荐文章
达里尔 达里尔
2年前
遇到的问题及解决方案
Vue下拉框赋值之后,点击下拉框没反应vuechange(){//在下拉框触发的change事件加上下面这段代码,重载this.$forceUpdate()}Vue3Htmljs
虾米大王 虾米大王
3年前
Java代码002
code002.jspInserttitlehere<!我们来说说,页面的page指令@pageattr1"value1"attr2"value2"....1.language属性用于设置JSP页面使用的语言,目前只支持java如@pagelanguage"java"2.extends属性该
Wesley13 Wesley13
3年前
PIC中档单片机汇编指令详解(5)
位操作指令详述BCF数据寄存器指定位清0语法形式:BCFf,b操作数:f为数据寄存器的低7位地址(0x00~0x7F)B为数据位编号(0~7)执行时间:一个指令周期执行过程:使数据寄存器f的的b位清0状态标志影响:无说明:该指令可对任何数据寄存器的任意一个位置清0,常用于标志位的设定和清除,或者把某一管脚置成低电平。指
Wesley13 Wesley13
3年前
VIM编辑器和VI编辑器的区别
vi和vim的区别_写在前面:这个两个“东西“着实让我烦恼一阵子,但是自己一直没当回事,但是遇到了好几次再决定彻底把他们搞的明白,一下是我通过查找资料了解到的关于这两个编辑器的区别和联系,希望对大家有所帮助!_它们都是多模式编辑器,不同的是vim是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面。
Wesley13 Wesley13
3年前
Java关于volatile的一些问题
1\.开始仔细说volatile是一个复杂的问题,可以从Java内存模型聊到缓存一致性协议,很难界定学到什么地方为止。很多时候,我们并不需要那么复杂,我们需要更加实用。所以,下面我们就来聊聊volatitle在实际开发中的问题。2\.并发编程中的三个重要概念1.原子性:是指一
Wesley13 Wesley13
3年前
MySQL的一些指令操作
这个连接的也不错:https://www.cnblogs.com/wangyueping/p/11258028.html(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.cnblogs.com%2Fwangyueping%2Fp%2F11258028.html)
Wesley13 Wesley13
3年前
CPU知识点一览
关于CPU和程序的执行1、程序的运行过程,实际上是程序涉及到的、未涉及到的一大堆的指令的执行过程。当程序要执行的部分被装载到内存后,CPU要从内存中取出指令,然后指令解码(以便知道类型和操作数,简单的理解为CPU要知道这是什么指令),然后执行该指令。再然后取下一个指令、解码、执行,以此类推直到程序退出。2、这个取指、
Wesley13 Wesley13
3年前
ORA
关于ORA02273错误,以前还真没有仔细留意过。昨天遇到了这个问题,遂顺便总结一番,以后遇到这类问题就可以直接用下面方案解决。如下所示,我们首先准备一下测试环境。CREATE TABLETEST.TEST( OWNER           VARCHAR2(30),  OBJECT_ID       NUMB
Stella981 Stella981
3年前
JFace对文本框的自动完成和内容助理小结
自动填充有两种TextContentAdapter只能用于Text文本框ComboContentAdapter只能用于Combo下拉框AutoCompleteField和ContentProposalAdapter的区别AutoCompleteField用于自动完成,例如你输入“山”这个字
Stella981 Stella981
3年前
JVM基础命令
介绍java虚拟机的指令功能,至少能阅读java代码生成的字节码指令含义一、概述Java虚拟机采用基于栈的架构,其指令由操作码和操作数组成。操作码:一个字节长度(0~255),意味着指令集的操作码个数不能操作256条。操作数:一条指令可以有零或者多个操作数,且操作数可以是1个或者多个字节。编译后的代码没有采用操作数
Stella981 Stella981
3年前
Docker seaweedfs
关于seaweedfs的介绍我就不在此文赘述,本文的主要目的是讲述我在docker中运行seaweedfs遇到的一些问题。这是我搜集的一些关于SeaWeedFS的资料(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fnote.youdao.com%2Fnoteshare%3Fid%3D
比特织云鹤
比特织云鹤
Lv1
二十四桥明月夜,玉人何处教吹箫?
文章
3
粉丝
0
获赞
0