AngularJS 如何在AngularJS中使用ng-checked预选复选框

在本文中，我们将介绍如何在AngularJS中使用ng-checked指令来预选复选框。ng-checked指令是AngularJS提供的一个用于检查复选框是否被选中的指令。

ng-checked指令的用法

ng-checked指令可以用于在AngularJS应用程序中预选复选框。它可以通过设置表达式来确定复选框是否被选中，表达式为真时，复选框将被选中。

ng-checked指令的语法如下：

<input type="checkbox" ng-checked="expression">

其中，expression是一个AngularJS表达式，如果表达式的值为真，复选框将被预选。

ng-checked指令的示例

下面的示例演示了如何使用ng-checked指令来预选复选框：

<div ng-app="myApp" ng-controller="myCtrl">
  <h3>预选复选框示例</h3>
  <input type="checkbox" ng-checked="isSelected">
  <button ng-click="toggleSelection()">切换选择</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function( $scope) {$ scope.isSelected = true;

   $scope.toggleSelection = function() {$ scope.isSelected = !$scope.isSelected;
  };
});
</script>

在上面的示例中，我们创建了一个AngularJS应用程序，并定义了一个控制器。控制器中的isSelected变量被设置为true，因此复选框将被预选。

还有一个按钮，点击按钮时将切换isSelected的值，从而改变复选框的预选状态。

动态预选复选框

ng-checked指令也可以使用动态表达式来实现动态预选复选框的效果。下面的示例演示了如何使用ng-checked指令和动态表达式来实现动态预选复选框：

<div ng-app="myApp">
  <h3>动态预选示例</h3>
  <div ng-controller="myCtrl">
    <div ng-repeat="item in items">
      <input type="checkbox" ng-checked="isSelected(item)">
      {{item}}
    </div>
  </div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function( $scope) {$ scope.items = ['选项1', '选项2', '选项3'];

   $scope.selectedItems = ['选项1', '选项3'];$ scope.isSelected = function(item) {
    return $scope.selectedItems.indexOf(item) !== -1;
  };
});
</script>

在上面的示例中，我们创建了一个动态预选复选框的示例。在控制器中定义了一个items数组，代表可选项。还定义了一个selectedItems数组，代表已选项，其中选项1和选项3已被预选。

在HTML中，使用ng-repeat指令遍历items数组，对于每一个item，使用ng-checked指令调用isSelected函数来确定是否预选。

isSelected函数检查selectedItems数组中是否包含当前item，如果是，则返回true，复选框将被预选。