AngularJS 下拉列表demo
列表 Demo angularjs
2023-09-14 09:11:55 时间
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"> </select> <div> 你选择了:{{selectedName}}</div> <button ng-click="getNames()">点我!</button> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = ["Google", "Runoob", "Taobao"]; $scope.getNames = function() { $scope.names = ["http", "get", "data"]; }; }); </script> <p>该实例演示了 ng-options 指令的使用。</p> </body> </html>
相关文章
- ASP.NET使用Model在MVC中进行自定义类的列表数据传递Demo
- 4-crm项目-kingadmin,列表页---表头和数据
- vue.js3: 从详情页返回列表页,显示跳转前列表而不是第一页(vue@3.2.26)
- Python3 数据结构:列表List中的方法
- SAP Spartacus content page url的硬编码列表 - Page Label
- Atitit 集团与个人的完整入口列表 attilax的完整入口 1. 集团与个人的完整入口列表1 2. 流量入口概念2 3. 流量入口的历史与发展2 1.集团与个人的完整入口列表
- git 查看本地分支、远程分支,以及更新远程分支本地列表
- laravel使用withCount获取列表下关联模型的数量
- Kotlin 实现粘列表标题+ListView的功能
- ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点:查询列表、增加、删除)
- 第14讲:Python使用比较运算符对列表进行比较