zoukankan      html  css  js  c++  java
  • 在ng-repeat内Checkbox默认选中

    Angularjs的ng-repeat是用来循环产生呈现数据。

    当我们需要在ng-repeat循环中呈现一系列Checkbox时,某些checkbox选项是默认选中的。


    在ASP.NET MVC程序中的Entity,准备一些数据:

     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

    在ASP.NET MVC的控制器中,准备一个方法。这个方法是读取Entity的数据,并为angularjs准备一个呼叫的方法:

     public JsonResult GetCars()
            {
                CarEntity ce = new CarEntity();
                var model = ce.Cars();
                return Json(model, JsonRequestBehavior.AllowGet);
            }
    
            public ActionResult CheckBox_IsChecked()
            {
                return View();
            }
    Source Code

    OK,下面我们开始我们真正的程序angularjs:


    Html程序:

    <div ng-app="PilotApp" ng-controller="CarCtrl">
        <div ng-repeat="c in Cars">
            <div>
                <input type="checkbox" value="{{c.ID}}" ng-checked="{{c.Selected}}" />{{c.Name}}
            </div>
           
        </div>
    </div>
    Source Code


    Angularjs程序:

     var pilotApp = angular.module("PilotApp", []);
       
        pilotApp.controller('CarCtrl', function ($scope, $http) {
            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

    程序运行最终呈现的效果:

  • 相关阅读:
    23种设计模式
    云计算管理三利器:Nagios、Ganglia和Splunk
    Hadoop 管理监控工具:Apache Ambari
    淘宝数据产品技术架构
    淘宝数据分析工具汇总
    Linux(CENTOS7) RabbitMq安装
    Linux(CENTOS7) Tomcat服务成功发布但局域网浏览器无法访问
    Linux(CENTOS7) Nginx安装
    Linux(CENTOS7) Jdk完整步骤安装
    Oracle存储过程案例集合
  • 原文地址:https://www.cnblogs.com/insus/p/9435321.html
Copyright © 2011-2022 走看看