欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-29 13:26:35
angularjs的ng-repeat是用来循环产生呈现数据。 当我们需要在ng-repeat循环中呈现一系列checkbox时,某些checkbox选项是默认选中的。...

angularjs的ng-repeat是用来循环产生呈现数据。

当我们需要在ng-repeat循环中呈现一系列checkbox时,某些checkbox选项是默认选中的。

在asp.net mvc程序中的entity,准备一些数据:

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

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准备一个呼叫的方法:

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

public jsonresult getcars()
    {
      carentity ce = new carentity();
      var model = ce.cars();
      return json(model, jsonrequestbehavior.allowget);
    }

    public actionresult checkbox_ischecked()
    {
      return view();
    }

ok,下面我们开始我们真正的程序angularjs:

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

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

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

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

总结

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