ASP.NET MVC下使用AngularJs语言(六):获取下拉列表的value和Text

前面Insus.NET有在Angularjs实现DropDownList的下拉列表的功能。但是没有实现怎样获取下拉列表的value和text功能。

下面分别使用ng-click和ng-change来实现。

先参考这篇《ASP.NET MVC下使用AngularJs语言(三):ng-optionshttp://www.cnblogs.com/insus/p/8527395.html

 在此篇的的angularjs的控制器添加select的代码:

 

复制代码
 $scope.GetValue = function () {
            var value = $scope.ddlPhones.ID;
            var text = $scope.ddlPhones.Name;
            $window.alert("选择的Value: " + value + "\n选择的Text: " + text);
        }
Source Code
复制代码

 

然后有ASP.NET MVC的视图中,添加一个铵钮:

 

演示:

 

 

另外一个功能环境,是使用ng-change来实现。这个往往是在下拉列表选择变化时,作来事件的反应。

实现之前,先参考另一篇《ASP.NET MVC下使用AngularJs语言(五):ng-selectedhttp://www.cnblogs.com/insus/p/8530354.html

 

打开这篇的angularjs的controller javascript代码,我们添加ng-change的程序:

 

 

复制代码
 $scope.GetValue = function () {
            var value = $scope.SelectedCar.ID;
            var text = $scope.SelectedCar.Name;
            $window.alert("选择的Value: " + value + "\n选择的Text: " + text);
        }
Source Code
复制代码

 

下面再来看看html的程序:为了能获取text的值。Insus.NET得对原有的html代码,稍作修改:

OK了,看看结果如何:

 

posted @   Insus.NET  阅读(1374)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2017-03-10 Bootstrap框架下实现图片切换
2015-03-10 上传Text文档并转换为PDF(解决乱码)
2014-03-10 MVC应用程序实现上传文件
2013-03-10 C#反射(Reflection)对类的属性get或set值
2010-03-10 System.Net.Dns.GetHostByAddress(string) 已经过时
2009-03-10 asp.net网页上嵌入FLV播放
点击右上角即可分享
微信分享提示