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

  • 关于下拉框使用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'},value: 2,value: 3,{name: '选项四',value: 4,group: 'B'},{name: '选项五',value: 5,{name: '选项六',value: 6,group: 'C'},{name: '选项七',value: 7,group: 'C'}
           ];
    • 页面中的表现如下图:
      关于上面代码的一些解释,可以从上图看到,只要我们把分组的信息写好,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: '选项一',show: true},value: 3},value: 5}
            ];
    • 页面中的表现如下:
      可以看到,选项二和选项四是禁用的。

  • 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: 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: '选项一',id: 1},id: 2},id: 3},id: 4},id: 5}
            ];
    • JavaScript部分,公用的函数changeItems部分

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

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

Hacking with Angular: 玩转ngOptions指令的更多相关文章

  1. HTML5、Select下拉框右边加图标的实现代码(增进用户体验)

    这篇文章主要介绍了HTML5、Select下拉框右边加图标的实现代码,深度美化页面增进用户体验效果,需要的朋友可以参考下

  2. 在Sierra上,Brew安装错误单独使用Xcode是不够的

    我正在尝试使用HomeBrewv1.3.8在运行xCodev9.1的MacOSXSerrav10.12.6上安装软件包.安装和错误是然后我运行命令表示软件更新服务器无法使用命令行工具包.我进入xCode,它表明安装了命令行工具.任何帮助将非常感激.西奥解决方法我去了AppleDeveloper网站并直接下载了命令行工具dmg.首先需要设置Apple帐户.命令行工具可在以下位置找到–https://

  3. iOS 10 Safari问题在DOM中不再包含元素

    使用此链接,您可以重现该错误.https://jsfiddle.net/pw7e2j3q/如果您点击元素并从dom中删除它,然后单击链接测试.你应该看到旧的元素弹出选择.是否有一些黑客来解决这个问题?解决方法我能够重现这个问题.问题是,每当您尝试删除其更改事件上的选择框时,iOS10都无法正确解除对选择框的绑定.要解决此问题,您需要将代码更改事件代码放在具有一些超时

  4. iOS Chrome上的HTML SELECT不显示“完成”选项

    我们在iOS上的Chrome中使用UI呈现时遇到问题,特别是HTMLSELECTDropDown元素.例:使用Safari,当您点击SELECT时,屏幕底部会打开一个微调器–您可以点击完成以选择您的选择并返回到表单.但是,当您在iOS上的Chrome中加载完全相同的页面时,不会显示“完成”.用户必须选择他们的选择,然后点击UI上的其他位置返回到表单.非常不直观,用户感觉好像SELECT没有用.有人有解决方案吗?

  5. 安装命令行工具Xcode 5

    我已经尝试过并尝试过但我仍然无法解决问题.我正在尝试安装PebbleSDK1.12并安装Xcode5的命令行工具.每次我在终端尝试xcode-select–install时,我都会收到“无法安装软件,因为它目前在软件更新服务器中不可用”我试图重新安装Xcode,但是没有用.当我进入Xcode-preferences-downloads时,没有命令行工具的部分.我也试过从开发者网站安装它们但无济于事.下载看起来正确,然后我去Xcode看到首选项,并没有列出命令行工具.你们都能提出什么建议吗?

  6. ios – xcodebuild相当于Xcode的“产品&gt;构建&gt;测试”

    我正在尝试编写一个脚本,将iOS应用程序提交给AppThwack(一个“真正的设备”UI测试服务).他们的指导是使用XcodeGUI,并使用BuildFor>Xcode产品菜单中的测试选项.这是有效的,但我无法将其转换为xcodebuild等效项.更一般地说,我们如何确定Xcode传递给xcodebuild的什么参数(假设它使用该工具).解决方法现在可以从Xcode8开始(在写作时在beta版).

  7. xcode – 在REPL中创建目标Swift AST上下文时出错((null))

    在这里,我已经看到有关这个错误的几个的问题,但是没有一个提出的解决方案适用于我.这是我得到的这可能是也可能没有发生在我发出一些我不记得的命令之后.奇怪的是,如果我卸载Xcode,REPL开始正常工作.但是,如果我重新安装Xcode,错误就会回来.我在Xcode7.2.1,顺便说一句.思考?

  8. IOS设备问题与HTML表单输入(type = text)

    所以我有一个HTML登录表单与两个字段:电子邮件和密码.这些可以在除iOS设备之外的任何设备的浏览器上轻松填充.在IOS领域几乎不能关注焦点,一旦焦点,键盘弹出,我开始打字,但实际上没有填充.我已经尝试过Chrome和safari,仍然得到相同的结果.字段保持黑色.Bellow是我的格式如何格式化:请帮助!

  9. 我在哪里可以获得XCode的10.6 SDK

    我有SNowLeopard的测试版,我从DVD上安装了XCode,但它只安装了10.5和10.4SDK.我需要针对10.6构建以验证Apple的错误.解决方法ADCMemberSite.登录并选择下载.如果您是Premier或Select会员,那应该是您可以找到它的地方.如果您不是Premier或Select会员,您将看不到它.

  10. Android Studio是否支持用于Android UI设计的AngularJS?

    我对AndroidStudio有疑问:AS在设计XML文件时是否支持AngularJS代码,例如:对于小动画或效果?

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部