Angular 1.8.2：获取复选框值始终未定义

Question

我有一个显示在模式框中的表单。在这种形式中，有一些复选框的状态我必须发送到后端。 但是当我查询复选框状态时，我总是得到一个未定义的结果。

这是打开模态框的按钮

<div ng-controller="AlloysProductsCtrl">
  <?= $this->element('new_alloy_modal'); ?>
  <button
     type="button"
     class="btn btn-success btn-xs mb-0"
     data-toggle="modal"
     data-target="#alloy-modal-new"
     data-backdrop="static"
     ng-click="newAlloysProduct(<?= $product->id; ?>)">
     <i class="glyphicon glyphicon-plus"></i>
 </button>
</div>

这是模态框

<div class="modal fade" id="alloy-modal-new" tabindex="-1" role="dialog" aria-labelledby="allowAddModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog modal-md vertical-align-center text-left" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    ... some other input fields
                    <div class="btn btn-default btn-checkbox">
                        <label for="default_value_ea" class="reset-margin"><?= __('Default'); ?></label>
                        &nbsp;&nbsp;<input type="checkbox" name="data[default_value]" ng-model="alloysProduct.alloysProduct.default_value" ng-checked="false" class="form-checkbox reset-margin" />
                    </div>
                    <div class="btn btn-default btn-checkbox">
                        <label for="default_value_ea" class="reset-margin"><?= __('Aktiv'); ?></label>
                        &nbsp;&nbsp;<input type="checkbox" name="data[active]" ng-model="alloysProduct.alloysProduct.active" ng-checked="false" ng-change="toggleActive(value)" class="form-checkbox reset-margin" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button
                        ng-disabled="!alloysProduct.alloysProduct.price || !alloysProduct.alloysProduct.alloy_id || !alloysProduct.alloysProduct.gender"
                        type="button"
                        class="btn btn-success m-0"
                        data-dismiss="modal"
                        ng-click="editAlloysProduct()"><?= __('Save'); ?>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

角度应用

angular.module('adminApp', ['ngResource'])
    .factory('AlloysProducts', ['$resource', function($resource) {
        return $resource('/admin/AlloysProducts/edit/:id/:product_id.json', null, {});
    }])
    .factory('Alloys', ['$resource', function($resource) {
        return $resource('/admin/Alloys/index.json', true, {
            query: {method: 'get', isArray: false, cancellable: true}
        });
    }])
    .controller('AlloysProductsCtrl', ['$scope', '$http', 'Alloys', 'AlloysProducts', function($scope, $http, Alloys, AlloysProducts) {
        $scope.alloys = Alloys.query();
        $scope.genders = [
            {abbrevation:'B', name:'both'},
            {abbrevation:'f', name:'female'},
            {abbrevation:'m', name:'male'}
        ];
        $scope.loadAlloysProduct = function(alloysProductId) {
            $scope.alloysProduct = AlloysProducts.get({ id:alloysProductId });
        };
        $scope.newAlloysProduct = function(productId) {
            $scope.alloysProduct = AlloysProducts.get({ id:0, product_id:productId });
        };

        $scope.toggleActive = function (value) {
            console.log(value); // undefiend
        };

        $scope.editAlloysProduct = function(alloysProductId) {
            $scope.alloysProduct.alloysProduct.sort = $scope.alloysProduct.alloysProduct.alloy_id;

            console.log($scope.alloysProduct.alloysProduct.active); // undefined

            $scope.alloysProduct.$save({ id:alloysProductId }, function() {
                // location.reload();
            }, function() {
                alert('error saving the alloy.');
            });
        };
    }]);

我不明白为什么我无法访问 ng-model。我在这里错过了什么？

Answer 1

我想我明白了。 将“editAlloysProduct”方法拆分为

$scope.addAlloysProduct = function() {
  $scope.alloysProduct.alloysProduct.sort = $scope.alloysProduct.alloysProduct.alloy_id;
  $scope.alloysProduct.alloysProduct.active = $scope.isActive || 0;
  $scope.alloysProduct.alloysProduct.default_value = $scope.isDefaultValue || 0;

  $scope.alloysProduct.$save(function() {
    location.reload();
  }, function() {
    alert('error saving the alloy.');
  });
};

修改编辑方法

$scope.editAlloysProduct = function(alloysProductId) {
  $scope.alloysProduct.$save({ id:alloysProductId }, function() {
    location.reload();
  }, function() {
    alert('error saving the alloy.');
  });
};

还修改了 ng-model

<input type="checkbox" id="default_value_ea" name="data[default_value]" ng-model="isDefaultValue" ng-checked="0" ng-true-value="1" ng-false-value="0" class="form-checkbox reset-margin" />

<input type="checkbox" name="data[active]" id="active_ea" ng-model="isActive" ng-checked="0" ng-true-value="1" ng-false-value="0" class="form-checkbox reset-margin" />

现在我得到了我需要在数据库中存储正确值的结果。