快捷導(dǎo)航

ng-repeat中Checkbox默認(rèn)選中的方法教程

更新時(shí)間：2018年08月08日 10:42:49 作者：楊明波(Leo Yang)

這篇文章主要給大家介紹了關(guān)于ng-repeat中Checkbox默認(rèn)選中的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

Angularjs的ng-repeat是用來(lái)循環(huán)產(chǎn)生呈現(xiàn)數(shù)據(jù)。

當(dāng)我們需要在ng-repeat循環(huán)中呈現(xiàn)一系列Checkbox時(shí)，某些checkbox選項(xiàng)是默認(rèn)選中的。

在ASP.NET MVC程序中的Entity，準(zhǔn)備一些數(shù)據(jù)：

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 = "保時(shí)捷",Selected=false }}
      };
    }

在ASP.NET MVC的控制器中，準(zhǔn)備一個(gè)方法。這個(gè)方法是讀取Entity的數(shù)據(jù)，并為angularjs準(zhǔn)備一個(gè)呼叫的方法：

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

    public ActionResult CheckBox_IsChecked()
    {
      return View();
    }

OK，下面我們開(kāi)始我們真正的程序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>

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;
    });
    
  });

程序運(yùn)行最終呈現(xiàn)的效果：