Question

我正在学习AngularJS并稍微玩一下。

我现在对复选框有一点了解。这是我的JavaScript代码：

angular.module('app',[]).controller('MainCtrl',function($scope,$http)
{
    $scope.photo = 1;
    $scope.art = 0;

    $scope.change = function()
    {
         $scope.photo = 0;
         $scope.art = 1;
    }
});

和HTML：

<div ng-controller="MainCtrl">
    <div class="checkbox">
         <label><input type="checkbox" ng-checked="photo">PhotoGallery</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" ng-checked="art">Art</label>
    </div>

    <button ng-click="change()">change</button>
</div>

我创建了一个小小的jsfiddle来显示我的问题：

http://jsfiddle.net/q30nrkzy

运行此代码时，您会看到预先选择的Photogallery。现在当我点击更改按钮时，它会更改选择。但是，当我然后删除＆＃34;艺术＆＃34;选择并再次单击更改按钮，没有任何反应。

这是正确的还是我明白完全错了？

Answer 1

ng-checked会在加载时更新您的IHM，但点击复选框不会更新您的$scope.variables，因为您没有将它们定义为模型。只需添加ng-model即可获得双向数据绑定，它应该有效。

<div class="checkbox">
    <label>
        <input type="checkbox" ng-checked="photo" ng-model="photo">PhotoGallery</label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox" ng-model="art" ng-checked="art">Art</label>
</div>

以下是一个有效的例子：updated jsfiddle

Answer 2

问题是你在功能改变中只改变n中的一个值。

你可以像我想的那样做：

$scope.photo = 1;
$scope.art = 0;

$scope.change = function() {
    tmp = $scope.photo;
    $scope.photo = $scope.art;
    $scope.art = tmp;
}

AngularJS和复选框

2 个答案: