zoukankan      html  css  js  c++  java
  • ASP.NET MVC下使用AngularJs语言(五):ng-selected

     这次学习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<Car> Cars()
            {
                return new List<Car>()
                {
                    {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,参考这一系列文章的第一篇的第六步《ASP.NET MVC下使用AngularJs语言(一):Hello your namehttp://www.cnblogs.com/insus/p/8520555.html
    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的视图:

    <div ng-app="PilotApp" ng-controller="CarCtrl">
        <select>
            <option value="0" label="Please Select"></option>
            <option ng-repeat="Car in Cars" value="{{Car.Id}}" ng-selected="{{Car.Selected == true}}">
                {{Car.Name}}
            </option>
        </select>
    </div>
    Source Code

     演示:

    从上面的Entity类中,可见 “宝马”这行是Selected的。
    因此,不管页面怎样刷新后,初始化"宝马"为选上的。

                                                                                                                                   
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

  • 相关阅读:
    Mapreduce 工作机制图,MapReduce组合式,迭代式,链式
    win7安装 git软件,如何使用git上传本地代码
    新技术架起 Oracle、Hadoop、NoSQL数据存储之间的桥梁
    Commons-logging + Log4j 使用方法、常见问题
    数据挖掘_面试题一
    未来10年是大数据价值变现的阶段
    数据挖掘十大经典算法
    Java环境变量详细设置
    Hadoop中NameNode、DataNode和Client三者之间的通信方式是什么?怎样进行合作?
    在线图片无损压缩
  • 原文地址:https://www.cnblogs.com/insus/p/8530354.html
Copyright © 2011-2022 走看看