ng-repeat中Checkbox默認選中的方法教程
Angularjs的ng-repeat是用來循環(huán)產(chǎn)生呈現(xiàn)數(shù)據(jù)。
當我們需要在ng-repeat循環(huán)中呈現(xiàn)一系列Checkbox時,某些checkbox選項是默認選中的。
在ASP.NET MVC程序中的Entity,準備一些數(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 = "保時捷",Selected=false }} }; }
在ASP.NET MVC的控制器中,準備一個方法。這個方法是讀取Entity的數(shù)據(jù),并為angularjs準備一個呼叫的方法:
public JsonResult GetCars() { CarEntity ce = new CarEntity(); var model = ce.Cars(); return Json(model, JsonRequestBehavior.AllowGet); } public ActionResult CheckBox_IsChecked() { return View(); }
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>
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; }); });
程序運行最終呈現(xiàn)的效果:
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
.NET?6新特性試用之System.Text.Json功能改進
這篇文章主要介紹了.NET?6新特性試用之System.Text.Json功能改進,2022-03-03利用AJAX與數(shù)據(jù)島實現(xiàn)無刷新綁定
利用AJAX與數(shù)據(jù)島實現(xiàn)無刷新綁定...2007-03-03vb.net借助剪貼板將圖片導(dǎo)入excel內(nèi)
這篇文章主要介紹了vb.net將圖片導(dǎo)入到excel的方法,只要借助剪貼板將圖片粘貼到excel中就可以完成了,大家參考使用吧2014-01-01基于Cookie使用過濾器實現(xiàn)客戶每次訪問只登錄一次
這篇文章主要介紹了基于Cookie使用過濾器實現(xiàn)客戶每次訪問只登錄一次,需要的朋友可以參考下2017-06-06