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

  });

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • asp.net Repeater取得CheckBox选中的某行某个值的c#写法

    1. foreach (Control c in this.rptTables.Controls) {     CheckBox cbx = (CheckBox)c.FindControl("cbxId");     TextBox tbx = (TextBox)c.FindControl("tbxTableName");     if (cbx != null)     {         if (cbx.Checked == true)         {   

  • asp.net Repeater取得CheckBox选中的某行某个值

    1. foreach (Control c in this.rptTables.Controls) {     CheckBox cbx = (CheckBox)c.FindControl("cbxId");     TextBox tbx = (TextBox)c.FindControl("tbxTableName");     if (cbx != null)     {         if (cbx.Checked == true)         {   

  • AngularJS基础 ng-repeat 指令简单示例

    AngularJS ng-repeat 指令 AngularJS 实例 循环输出多个标题: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <

  • AngularJS监听ng-repeat渲染完成的方法

    某个项目,我的网页中有一个列表<ul>元素,样式如下: 实际上它是通过Angular的ng-repeat形成的,html中的代码是: <li ng-repeat="for list in lists()" id="{{ list.id }}">{{ list.name }}</li> 图中下方的新建清单button,点击之后就往lists数组中push了一个新的list对象,此时页面会自动渲染,也对应增加一个<li>,

  • Angularjs中ng-repeat的简单实例

    Angularjs中ng-repeat的简单实例 第一个例子:使用ng-repeat最简单的例子 <html ng-app="myApp"> <head> <title>angularjs-demo</title> <script type="text/javascript" src="angular.min.js" charset="utf-8"></scri

  • ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)

    ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)

    界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="left"> <fieldset style="width: 400px; height: 150px"> <p> 请选择语言</p> <asp:CheckBoxList ID="ckbListPro" runat=&q

  • ng-repeat中Checkbox默认选中的方法教程

    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

  • jstree中的checkbox默认选中和隐藏示例代码

    jstree复选框自定义显示隐藏和初始化默认选中 首先需要配置 Checkbox plugin "plugins" : ['checkbox'] 设置默认选中状态(checkbox 选中) state: {checked: true} $.jstree.defaults.checkbox.tie_selection 示例: $('#demo_tree').jstree({ "core" : { 'data': [ { "id" : "a

  • 关于Element-ui中table默认选中toggleRowSelection问题

    关于Element-ui中table默认选中toggleRowSelection问题

    目录 Element-ui中table默认选中toggleRowSelection 一.toggleRowSelection 二.操作 三.案例 Element-ui踩坑之表格选中toggleRowSelection问题 Element-ui中table默认选中toggleRowSelection 一.toggleRowSelection toggleRowSelection(row, selected)接受两个参数,row传递被勾选行的数据,selected设置是否选中 注意:调用toggle

  • 改变checkbox默认选中状态及取值的实现代码

    <inputtype="checkbox"name="chk"value="1"val="1级">1级 <inputtype="checkbox"name="chk"value="2"checked="checked"val="2级">2级 <inputtype="checkbox&quo

  • jquery判断至少有一个checkbox被选中的方法

    本文实例讲述了jquery判断至少有一个checkbox被选中的方法.分享给大家供大家参考.具体实现方法如下: html代码部分: <form> <!-- bunch of checkboxes like: --> <input type="checkbox" ... > <input type="checkbox" ... > <!-- submit button, defaults to disabled -

  • 在Pycharm中设置默认自动换行的方法

    如下所示: 只对当前文件有效的操作: 菜单栏->View -> Active Editor -> Use Soft Wraps: 如果想对所有文件都有效,就要在setting里面进行操作: File-> Setting-> Editor-> General -> Use soft wraps in editor. 以上这篇在Pycharm中设置默认自动换行的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui checkbox默认选中,获取选中值,清空所有选中项的例子

    废话不多说,直接上代码吧: var arr = res.data; var myCheckbox = $("input[name='MenuArr']"); myCheckbox.prop('checked', false); //切换下拉选项时,清空所有选中状态 form.render('checkbox');//记得每次操作后要渲染该元素 for (var j = 0; j < arr.length; j++) { //数据库返回的需要选中项的值,我这里只返回了value,有

  • laravel-admin select框默认选中的方法

    laravel-admin后台框架的select选择框的默认选中,结合select2的js插件: 文档http://laravel-admin.org/docs/#/zh/model-form-fields?id=select%E9%80%89%E6%8B%A9%E6%A1%86: 文档里面没有看到这个默认选中的属性,也可能是我没有找到:查阅了select2的文档看到了selected属性,通过曲线的方式实现了这个功能: protected function form() { return Ad

  • C#8.0 中开启默认接口实现方法

    当你升级到 C# 8.0 和 .NET Core 3.0 之后,你就可以开始使用默认接口实现的功能了. 从现在开始,你可以在接口里面添加一些默认实现的成员,避免在接口中添加成员导致大量对此接口的实现崩溃. 最低要求 要写出并且正常使用接口的默认实现,你需要: C# 8.0 .NET Core 3.0 Visual Studio 2019 Preview (16.1 以上版本) 下载安装 Visual Studio 2019 Preview 版本 前往下载安装 Visual Studio Prev

  • nodejs require js文件入口,在package.json中指定默认入口main方法

    我们都知道nodejs遵循commonJS规范,各个js是独立的. 如果目录结构是: –config 文件夹 – index.js – test.js app.js 那么在app.js中require('./config')的时候,默认是index.js. 如何修改默认的config的入口? 只需要在config中添加package.json配置文件,在这个文件中进行指定默认的入口 { "name":"配置文件", "description":&

随机推荐