【问题标题】:How to have one checkbox checked by default angularjs如何在默认情况下选中一个复选框
【发布时间】:2016-06-13 17:30:29
【问题描述】:

当页面在两个切换复选框之间加载时,如何默认选中一个复选框。我的代码:

jsfiddle:http://jsfiddle.net/Lvc0u55v/456/

function MyCtrl($scope) {
    $scope.changeAxis1 = function() {
        if ($scope.thirtyDay) {
                    $scope.wholeTimeline = false;

    }
                };

     $scope.changeAxis2 = function() {
            if($scope.wholeTimeline) {
                    $scope.thirtyDay = false;  

                }
    };
};

查看

 <label class='checkboxes' id='checkbox_1'>
        <input type="checkbox" ng-model="thirtyDay" ng-change="changeAxis1()">
        Two
        </label>
         <label class='checkboxes' id='checkbox_2'>
        <input type="checkbox" ng-model="wholeTimeline" ng-change="changeAxis2()">
        One
        </label>

【问题讨论】:

  • 设置model = true for ex。 $scope.thirtyDay = true;
  • 是的,我已经试过了,它不起作用

标签: javascript jquery angularjs


【解决方案1】:

在您的控制器中将其中一个值初始化为true

function MyCtrl($scope) {
    $scope.changeAxis1 = function() {
        if ($scope.thirtyDay) {
            $scope.wholeTimeline = false;
        }
    };

    $scope.changeAxis2 = function() {
         if($scope.wholeTimeline) {
            $scope.thirtyDay = false;  
         }
    };

    $scope.thirtyDay = true;
};

您还需要在您的视图中包含ng-appng-controller 才能让Angular 执行任何操作:

<div class="checkbox" ng-app="" ng-controller="MyCtrl">

http://jsfiddle.net/Lvc0u55v/457/

【讨论】:

    【解决方案2】:

    您可以使用ng-checked="expression"

    <input type="checkbox" ng-checked="expression" ng-model="thirtyDay" ng-change="changeAxis1()">
            Two
    

    并为表达您希望如何检查复选框的方式添加一些逻辑

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2018-06-17
      • 2013-07-17
      • 1970-01-01
      • 1970-01-01
      • 2011-06-12
      • 1970-01-01
      • 2011-08-01
      相关资源
      最近更新 更多