angularJs指令 之 select

angular中的select指令必须配合 ng-model 使用,否则无效,不能正常显示。

以下是示例中将要用到的数据对象,控制器中定义如下:

app.controller("demoCtrl",["$scope", function($scope) {

            //定义测试数据
            $scope.data0 = [{id: 1, name: "男"},
                            {id: 0, name: "女"}];

            $scope.data1 = [{id: 0, name: "篮球", tppe: "球类"},
                            {id: 1, name: "足球", tppe: "球类"},
                            {id: 2, name: "溜冰", tppe: "轮滑"},
                            {id: 3, name: "滑板", tppe: "轮滑"}];
        }]);

以下是各个示例的代码展示及说明:

    <!-- 场景一 -->

    <!--
        说明:简单用法,初始化 gender1 为 0 (number 类型), 即性别为 女
    -->
    <select ng-init="gender1=0" ng-model="gender1">
        <option value="1">男</option>
        <option value="0">女</option>
    </select>

    <!--页面刚加载时打印: i am a girl, 此后不管你选择男或女始终打印:i am a boy -->
    {{ gender1 ? "i am a boy" : "i am a girl" }} 

    <!--
        说明:简单用法,初始化 gender2 为 false (boolean 类型), 即性别为 女
    -->
    <select ng-init="gender2=false" ng-model="gender2">
        <option value="true">男</option>
        <option value="false">女</option>
    </select>

    <!--页面刚加载时打印: i am a girl, 此后不管你选择男或女始终打印:i am a boy -->
    {{ gender2 ? "i am a boy" : "i am a girl" }}

对场景一的说明:

  此使用场景下,不管你的ng-model刚开始定义的是什么类型(number or boolean or string...),只要你操作了下拉框并改变了选项, ng-model的数据类型都会变成 string 类型。上面的 gender1 开始定义的是 number 类型, gender2 开始定义的是 boolean 类型。当你操作了下拉框,改变其选项时,两者都变成了 string 。 即 0 -> "0" , false -> "false"。 这也就是之后不管你选 男 还是 女, 始终打印“ i am a boy ”的原因:

  因为在js中,对 字符串 作 布尔运算 时,只要不是空字符串,全都为 true。所以 gender1 和 gender2 始终为 真(true), 因此始终打印:i am a boy。如果在你的控制器中有类似这样的操作时,你可能就掉坑里了:

//当选择 女 时,做些操作
        if(!gender1) { do something... }

我就这么被坑过...

   <!-- 场景二 -->

    <!--
        说明:通过指令ng-options生成选项
    -->
    <select ng-model="gender3" ng-options="g.name for g in data0">
    </select>

    <!-- 页面刚加载时不打印任何东西(未初始化),之后根据你的选择打印 {id: 1, name: "男"} 或 {id: 0, name: "女"} -->
    {{gender3}} 

对场景二的说明:

  ng-options="g.name for g in data0"

  通过 g 遍历数组data0中的每个元素, 并将其每个元素的name属性作为<option>的text, 而整个元素作为<option>的value。

相当于:<option value="g">g.name</option> 。因此,当你选择 男 或 女 时, $scope.gender3 = {id: 1, name: "男"} 或 {id: 0, name: "女"}, 它得到的是数组元素

   <!-- 场景三 -->

    <!--
        说明:通过指令ng-options生成选项
    -->
    <select ng-model="gender4" ng-options="g.id as g.name for g in data0">
    </select>

    <!-- 页面刚加载时不打印任何东西(未初始化),之后根据你的选择打印 0 或 1 -->
    {{gender4}}

对场景三的说明:

  ng-options="g.id as g.name for g in data0"

  通过 g 遍历数组data0中的每个元素, 并将其每个元素的name属性作为<option>的text,每个元素的id属性作为<option>的value。

相当于:<option value="g.id">g.name</option> 。因此,当你选择 男 或 女 时, $scope.gender4 = 1 或 0, 它得到的是数组元素的id值

   <!-- 场景四 -->

    <!--
        说明:通过指令ng-options生成选项,并手动添加 "=请选择=" 选项
    -->
    <select ng-model="gender5" ng-options="g.id as g.name for g in data0">
        <option value="">=请选择=</option>
    </select>

对场景四的说明:

  我们经常会碰到要手动添加选项的情况。当在使用了ng-options自动生成选项时,如果要手动添加类似于 "=请选择=" 这样的初始选项,那么:

此 option 必须设置 value 属性,并且 value 属性的值必须为空,即 value=""

   <!-- 场景五 -->

    <!--
        说明:通过指令ng-options生成选项,并实现分组
    -->
    <select ng-model="hobby1" ng-options="g.id as g.name group by g.type for g in data1">
    </select>

效果图:

对场景五的说明:

  ng-options="g.id as g.name group by g.type for g in data1"

  通过 g 遍历数组data1中的每个元素, 并将其每个元素的name属性作为<option>的text,每个元素的id属性作为<option>的value。并根据每个元素的type属性进行分组。

group by 相当于创建<optgroup>,面type属性则当作<optgroup>的label, 相当于:

<optgroup label="g.type">

  <option value ="g.id">g.name</option>

</optgroup>

   <!-- 场景六 -->

    <!--
        说明:通过指令ng-options生成选项,并且允许 表达式
    -->
    <select ng-model="hobby2" ng-options="g.id as (‘我爱‘+g.name) for g in data1">
    </select>

效果图:

对场景六的说明:

  此示例说明在 ng-options 中是允许 表达式 的。我们甚至可以改变option的返回值,如:ng-options="(g.id>1) as (‘我爱‘+g.name) for g in data1"

将返回 boolean 类型的值,不再是 g.id 的值。

   <!-- 场景七 -->

    <!--
        说明:通过指令ng-options生成选项,并排序
    -->
    <select ng-model="hobby3" ng-options="g.id as g.name for g in data1 | orderBy:‘name‘">
    </select>

对场景七的说明:

  此示例说明 ng-options 支持排序。

时间: 2024-12-20 11:50:28

angularJs指令 之 select的相关文章

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看

AngularJS指令中的compile与link函数解析

AngularJS指令中的compile与link函数解析 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-lin

angularjs指令中的compile详解

篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的

JavaScript强化教程——AngularJS 指令

本文为 H5EDU 机构官方 HTML5培训 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令. AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. 完整的指令内容可以参阅 An

angularjs 指令—— 绑定策略(@、=、&amp;)

angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到那些变量,因用法的不同,所以需要设置合适的绑定策略. 一.@ 绑定策略 @ 绑定策略,它的作用就是能把指令配置的独立Scope下变量的值等于根据@绑定的指令属性的值.(指令属性的值可以使用表达式,但是得出来的值一定是字符串.) 1.上代码: html代码 <!DOCTYPE html> <h

AngularJS 指令

AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许自定义指令. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. 实例 <div ng-app="" ng-init=&quo

AngularJS指令

AngularJS指令 通过指令的心属性来扩展HTML. AngularJS指令是扩展的HTML属性,带有前缀ng-. ag-app指令初始化一个AngularJS应用程序. ng-init指令初始化应用程序数据. ng-model指令把元素值绑定到应用程序,如输入域的值. <div ng-app="" ng-init="name='hello world'"> <div><input type="text" ng-

AngularJS 指令 表达式 应用

AngularJS 指令 AngularJS 指令是以 ng 作为前缀的 HTML 属性. ng-app 指令 ng-app 指令定义了 AngularJS 应用程序的 根元素. ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序. 稍后您将学习到 ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块. ng-model 指令 ng-model 指令 绑定 HTML 元素 到应用程序数据. ng-model 指令也可以: 为应用程序数据

AngularJS 指令应用

AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. <div ng-app="" ng-init="firstName='John'"> <p&g