博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ASP.NET MVC下使用AngularJs语言(五):ng-selected
阅读量:5906 次
发布时间:2019-06-19

本文共 1847 字,大约阅读时间需要 6 分钟。

 这次学习ng-selected语法,这个是为DropDownList下拉列表显示默认选项。

 演示从下面步骤开始

1,新建一个model:

上面#14行代码的property,数据类型为bool。即是存储选项是否为选中与否,true或false。

public class Car    {        public int ID { get; set; }        public string Name { get; set; }        public bool Selected { get; set; }    }
Source Code

 

2,创建一个Entity:准备数据:

 

public class CarEntity    {        public IEnumerable
Cars() { return new List
() { {
new Car() { ID = 1, Name = "玛莎拉蒂",Selected=false }}, {
new Car() { ID = 2, Name = "奔驰" ,Selected=false }}, {
new Car() { ID = 3, Name = "宝马" ,Selected=true }}, {
new Car() { ID = 4, Name = "保时捷",Selected=false }} }; } }
Source Code

 

 3,准备ASP.NET MVC的控制器:

 

public class CarController : Controller    {        // GET: Car        public ActionResult Index()        {            return View();        }        public JsonResult GetCars()        {            CarEntity ce = new CarEntity();            var model = ce.Cars();            return Json(model, JsonRequestBehavior.AllowGet);        }    }
Source Code

 

4,这一步骤,创建ng-app,参考这一系列文章的第一篇的第六步《》。

5,创建ng-controller:

pilotApp.controller('CarCtrl', ['$http', '$scope',    function ($http, $scope) {        var obj = {};        $http({            method: 'POST',            url: '/Car/GetCars',            dataType: 'json',            headers: {                'Content-Type': 'application/json; charset=utf-8'            },            data: JSON.stringify(obj),        }).then(function (response) {            $scope.Cars = response.data;        });    }]);
Source Code

 

 最后一步,是实现ASP.NET MVC的视图:

 

Source Code

 

 演示:

从上面的Entity类中,可见 “宝马”这行是Selected的。

因此,不管页面怎样刷新后,初始化"宝马"为选上的。

 

                                                                                                                               

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           

转载地址:http://tccpx.baihongyu.com/

你可能感兴趣的文章
APUE第15章学习扎记之程序的存储区布局试验
查看>>
ubuntu升级16.04 inter idea 中文输入法无效
查看>>
三目运算判断jsp脚本里面的值
查看>>
sshtunnel在本地访问云服务器mysql
查看>>
小蚂蚁学习APP接口开发(1)—— json方式封装通信接口
查看>>
我的友情链接
查看>>
CDN相关
查看>>
Tomcat的设置4——Tomcat的体系结构与设置基于端口号的虚拟主机
查看>>
我的友情链接
查看>>
ftp协议基础
查看>>
访问共享经常中断
查看>>
人生的交易
查看>>
MySql
查看>>
sql server 下载安装标记
查看>>
js运算符(运算符的结合性)
查看>>
idea 编译级别的设置
查看>>
内置对象Array的原型对象中添加方法
查看>>
6大设计原则
查看>>
Github简介
查看>>
CISCO2691的OSPF点对点密文测评测试
查看>>