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 }} }; }
在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(); }
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; }); });
程序运行最终呈现的效果:
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对猪先飞的支持。
相关文章
- 这篇文章主要介绍了intelliJ IDEA 多行选中相同内容的快捷键分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-06
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25C#遍历得到checkboxlist选中值和设置选中项的代码
这篇文章主要介绍了C#遍历得到checkboxlist选中值和设置选中项的代码,代码简单易懂,具有参考借鉴价值,需要的朋友可以参考下...2020-06-25- 下面小编就为大家带来一篇jq checkbox 的全选并ajax传参的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-04-03
jquery checkbox无法用attr()二次勾选问题的解决方法
下面小编就为大家带来一篇jquery checkbox无法用attr()二次勾选问题的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-07-29Jquery和angularjs获取check框选中的值的方法汇总
本文分别通过具体的实例向大家展示了jquery和angularjs获取获取check框选中的值的方法,非常的简单实用,有需要的小伙伴可以参考下...2016-01-20Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
这篇文章主要介绍了Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法的相关资料,需要的朋友可以参考下...2016-05-04- 这篇文章主要为大家详细介绍了vue使用vant中的checkbox实现全选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-17
- 这篇文章主要介绍了C#实现将选中复选框的信息返回给用户的方法,涉及C#针对复选框操作的相关技巧,需要的朋友可以参考下...2020-06-25
- 下面小编就为大家带来一篇jQuery 更改checkbox的状态,无效的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-07-29
实现DataGridView控件中CheckBox列的使用实例
最近做WindowsForms程序,使用DataGridView控件时,加了一列做选择用,发现CheckBox不能选中。搜索后,要实现DataGridView的CellContentClick事件,将代码贴一下...2021-09-22jquery捕捉回车键及获取checkbox值与异步请求的方法
这篇文章主要介绍了jquery捕捉回车键及获取checkbox值与异步请求的方法,实例分析了jQuery针对回车键的捕捉,checkbox值的获取以及异步请求的响应等相关技巧,需要的朋友可以参考下...2015-12-25- C#给picturebox控件加图片选中状态的2个方法,需要的朋友可以参考一下...2020-06-25
- DataGridView中CheckBox实现某一列单选,需要的朋友可以参考一下...2021-09-22
asp.net中ListBox 绑定多个选项为选中及删除实现方法
文章介绍了关于在asp.net中的listbox的绑定多个选项和同时选中多个选项以及删除多个选项的方法...2021-09-22- 代码如下 复制代码 <form action="?action=doing" method="post"> <input name="ID_Dele[]" type="checkbox" id="ID_Dele[]" value="1...2016-11-25
- checkbox在html中是以数组形式存储的,如果我们要获取用户选择了我个checkbox值我们可以利用遍历或直接把数组利用implode转换在字符进行存储。 php要求同名表单元...2016-11-25
AngularJS ng-repeat数组有重复值的解决方法
不知道大家是否遇到过这个问题,在当Angular.JS ng-repeat数组中有重复项时,系统就会抛出异常,这是该怎么做?本文通过示例代码介绍了详细的解决方法,有需要的朋友们可以参考借鉴,下面来一起看看吧。...2016-10-25ASP.NET DropDownListCheckBox使用示例(解决回发问题)
本文为大家介绍下ASP.NET DropDownListCheckBox的使用,这个是根据LigerUI改的,解决了回发问题,喜欢的朋友可以参考下...2021-09-22- 这篇文章主要介绍了jQuery判断checkbox选中状态的相关资料,非常具有参考借鉴价值,感兴趣的朋友一起学习吧...2016-05-14