angular实现select的ng-options

html

<div ng-controller="ngSelect">
    <select ng-model="vm.selectVal" ng-options="o.title for o in vm.optionsData">
        <option value="">请选择</option>
    </select>
</div>

js

var app = angular.module("app",[]);
app.controller("ngSelect",function($scope){

    var vm = $scope.vm = {};

    //数组对象用来给ng-options遍历
    vm.optionsData = [{
        title : "angularJs"
    },{
        title : "emberJs"
    },{
        title : "backboneJs"
    },{
        title : "knockoutJs"
    }];

})

给ng-options自定义option的value值

<select ng-model="vm.selectVal" ng-options="o.id as o.title for o in vm.optionsData" ng-change="selectChange()">
    <option value="">请选择</option>
</select>

添加了id属性作为option的value
你可能会在页面视图看到option生成的value为0,1,2,3,是因为angular会自动添加索引为value的值
让我们来个ng-change事件监控来看看

vm.optionsData = [{
    id : 4543,
    title : "angularJs"
},{
    id : 546,
    title : "emberJs"
},{
    id : 456,
    title : "backboneJs"
},{
    id : 75,
    title : "knockoutJs"
}];

$scope.selectChange = function(){
    //添加了ng-change事件来试试id值的输出
    console.log(vm.selectVal);
}
时间: 2024-10-21 07:06:07

angular实现select的ng-options的相关文章

JS对select动态添加options操作[IE&amp;FireFox兼容]

<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态删除select中的所有options: document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option: document.getElementById("ddlResourc

Angular 1.x下 select 的一个巨大的坑

双向绑定这个特性有时让人又爱又恨 假设控制器 function($scope){ $scope.options = [{name:"alex",id:232,-},{-},{-}-]; $scope.myModel = {name:"alex",id:232}; } <select ng-model="myModel.id"> <option value="">-请选择-</option>

javascript中select中options的属性

Select 选择区(下拉列表)对象 由“<select>”指定. 属性length 返回 Select 对象下选项的数目. obj.length // obj.options.lengthselectedIndex 返回被选中的选项的下标.obj.selectedIndex这个下标就是在 options[] 数组中该选项的位置.如果 Select 对象允许多项选择,则返回第一个被选中的选项的下标. form 返回包含本元素的表单对象. obj.options[x].form 方法blur()

利用angular打造管理系统页面

1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目:点击前往 将AdminLTE项目的精简版本源代码复制到adminSystem应用主模块的主组件的模板中 AdminLTE项目的精简版本效果图 <!DOCTYPE html> <!-- This is a starter template page. Use this page to star

angular.js 学习1

以前很早就听说了ng,但是一直没有去接触去学习,那时觉得不做一个后台不学h5不学js框架,直到前一段时间基于tp3.2,自己能完成简单的pc站后台了,才开始着手h5和ng的学习. 看见ng的文档还是比较兴奋的,因为: 红圈的地方在tp上或是vue(曾经根据官方文档自学了基础部分)都是有的,(至于依赖注入好像是在tp5才有.觉得应该上手起来不会太难. 下文为了简便统一把AngularJs写成ng. 开始了,angular: 1:首先谈及指令,何为指令呢? 指令可以理解为声明特殊的标签或属性 ng内

angularjs中select下拉选择第一个选项为空白的解决办法

在angular设置select时,由于没有设置默认的选择项,就会导致第一个option中的值为undefined,选择其他值时,option为undefined的选项却自动消失了,这说明是在代码中没有设置select的默认选项.如果select有值,则显示正常.在代码中,初始化select的默认值即可.更改代码如下: <select ng-model="prov" ng-change="changeProv()" ng-init="prov='si

js对select动态添加和删除OPTION

<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态删除select中的所有options: document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option: document.getElementById("ddlResourc

Angular 2/4 多语言 国际化支持

ngx-translate  包使用 1.  安装 npm @ngx-translate/core --save npm @ngx-translate/http-loader 2. app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'

使用jquery 对 radio 和 select 的各种操作.

Radio 1.获取选中值,三种方法都可以: $('input:radio:checked').val(): $("input[type='radio']:checked").val(); $("input[name='rd']:checked").val(); 2.设置第一个Radio为选中值:     $('input:radio:first').attr('checked', 'checked'); 或者 $('input:radio:first').attr