AngularJS初始化Select选择框
一、引入
之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架，后来我接手相关他项目里的功能。由于对AngularJS不是太熟，在他的功能上进行二次开发就比较费劲了，印象比较深的一个就是如何创建并初始化一个Select选择框。最近我又研究了一下AngularJS，研究出一个个人觉得比较好的初始化Select选择框的方法。
二、代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!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"><p>选择品牌:</p><select ng-model="selectedBrand" ng-options="x.label for x in brands"></select><h1>你选择的品牌是: {{selectedBrand.label}}</h1><h1>你选择的品牌ID是: {{selectedBrand.val}}</h1></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.brands = [ {label : "--请选择--", val : "-1"}, {label : "GROUP", val : 0}, {label : "SNH48", val : 1}, {label : "BEJ48", val : 2}, {label : "GNZ48", val : 3}, {label : "SHY48", val : 4}, {label : "CKG48", val : 5}, ]; $scope.selectedBrand=$scope.brands[1];});</script><p>该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。</p></body></html> |
三、效果图
四、总结一下
AngularJS是一款非常优秀的JS框架，非常好用而且有很多自己的组件。
继续学习中。。。。。
好记性不如烂笔头！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）