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

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

  • 相关阅读:
    integer和double的比较.
    查看mysql版本的四种方法
    codefoces 1397D Stoned Game
    最小生成树集合合并
    codefoces 1400B RPG Protagonist
    codefoces 1400B RPG Protagonist
    牛客挑战赛42 小睿睿的伤害
    病毒扩散 排列组合
    Dus on tree 月出皎兮,佼人僚兮。
    msc的宠物 二分+树形DP
  • 原文地址:https://www.cnblogs.com/insus/p/9435321.html
Copyright © 2011-2022 走看看