Question

小问题（可能是一个逻辑错误），我试图让复选框在点击后自动更新，并在同一时间使用其余的api来PUT更改数据库，并且PUT方法有效，它会更新数据库，但只有当我刷新页面时才会更新复选框状态，复选框将更新。

我有这个简单的代码：

<input type="checkbox" ng-checked="action.state" ng-click="setState($event, key, action)"><div class="track"><div class="handle"></div></div>

和后端如下：

.controller('Actions', function ($scope, $filter, $resource, $ionicActionSheet, $ionicModal) {
    var actionListResource = $resource('/api/actions/');

    actionListResource.query(function (data) {
        $scope.actions = data;
    });

    $scope.setState = function (event, index, action) {

        if (action.widget === 'toggle' && action.state === 1) {
            action.state = 0;
        }
        else {
            action.state = 1;
        }

        event.preventDefault();

        var actionsResource = $resource('/api/actions/:actionId/', {actionId:'@id'}, {
            'update': {
                method: 'PUT'
            }
        }); 
    };
    ...more code here
})

action.state始终是1或0值，我已经检查了$scope.actions[index].state，当我点击复选框时它会自动更新。

谢谢！

Answer 1

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">

<div ng-controller="myCtrl">
  <input type="checkbox" ng-model="action" ng-click="setState()">
</div>

<script>
angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.setState = function() {
      window.alert($scope.action);
      // $scope.action value will be true or false
    };
  }]);
</script>
</body>
</html>

Answer 2

尝试ng-model而不是ng-checked。切换的东西看起来很不必要。 ng-change也可用于触发请求。在他们的文档中，他们完全解决了您描述的问题。 https://docs.angularjs.org/api/ng/directive/ngChange

ng-click with ng-checked not updated复选框状态

2 个答案: