AngularJS 和复选框

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

当您运行使用此代码时，您会看到照片库已预先选中。现在，当我单击更改按钮时，它会更改选择。但是当我然后删除 "art" 选择并再次单击更改按钮时，没有任何反应。

这是正确的还是我的理解完全错误？

Answer 1

ng-checked will update your IHM on load but clicking on a checkbox will not update your $scope.variables since you do not define them as a model. Just add 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

问题是您在函数更改中仅以一种方式更改值。

我觉得你可以这样做:

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

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

AngularJS 和复选框

AngularJS and checkboxes

checkbox

angularjs