Question

我有以下复选框：-

<input type="checkbox" ng-click="toggleShowOtherUserConfiguration()"
       ng-model="showOtherUserConfiguration" 
       name="ShowOtherUserConfiguration"
       value="showOtherUserConfiguration" />

在我设置的app.controller中：-

$scope.showOtherUserConfiguration = false;

因此，在加载页面时，该复选框将始终保留false。

但是发生了什么事：-

页面加载时复选框处于未选中状态，此时$scope.showOtherUserConfiguration的值为false。

选中此复选框后，其值仍为false。

当“复选框”状态从“已选中”更改为“未选中”时， $scope.showOtherUserConfiguration的值变为true。

请指导我，如何$scope.showOtherUserConfiguration保持未选中状态false和true处于选中状态？

注意：-除了更改toggleShowOtherUserConfiguration()的值之外，没有更改$scope.showOtherUserConfiguration函数内的任何内容

Answer 1

您不能将ng-click与复选框一起使用，而需要将ng-change用于复选框事件。

尝试一下：

<!DOCTYPE html>
<html ng-app="app">
<head>
	<title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
  <script type="text/javascript">
      var app = angular.module('app', []);
      app.controller('OneController', function ($scope) {
        $scope.showOtherUserConfiguration = false;
        $scope.toggleShowOtherUserConfiguration = function (argument) {
            console.log($scope.showOtherUserConfiguration);
        }
    });
</script>
</head>
<body ng-controller="OneController">
    <input type="checkbox"
           ng-change="toggleShowOtherUserConfiguration()"
           ng-model="showOtherUserConfiguration"
           name="ShowOtherUserConfiguration"
           value="showOtherUserConfiguration" />
    {{showOtherUserConfiguration}}
</body>
</html>

复选框ng-model值未根据复选框单击更改/更新

1 个答案: