当前位置： 移动技术网 > IT编程>开发语言>.net > ng-repeat中Checkbox默认选中的方法教程

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

2018年08月18日  | 移动技术网IT编程  | 我要评论

淘宝推广论坛,拍卖总裁老公,安全阀的作用

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

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


总结

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网