Angular 1.8.2: Get checkbox value is always undefined

Question

I have a form which is displayed in a modal box. In this form there are some checkboxes whose status I have to send to the backend. But when I query the checkbox status I always get back an undefined.

this is the button to open the modalbox

<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>

this is the modalbox

<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>

the angular app

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.');
            });
        };
    }]);

I don't understand why I can access the ng-model in these places. What am I missing here?

Answer 1

I think i got it. After splitting "editAlloysProduct" Method into

$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.');
  });
};

and modifying the Method for editing

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

also modfying the 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" />

i got the results i need to store the right values in database.

But i got a new Problem with checkboxes checked state. If i open the edit modalbox there the checkboxes should be checked or not, depending on the saved state. But these chechboxes are always unchecked

Doing an output of the Model i see that this values are present

<input type="checkbox" name="data[default_value]" id="default_value_ee" ng-model="alloysProduct.alloysProduct.default_value" ng-checked="{{alloysProduct.alloysProduct.default_value}}" ng-true-value="1" ng-false-value="0" ng-disabled="(alloysProduct.alloysProduct.default_value == true)" class="form-checkbox reset-margin">

<input type="checkbox" name="data[active]" id="active_ee" ng-model="alloysProduct.alloysProduct.active" ng-checked="{{alloysProduct.alloysProduct.active}}" ng-true-value="1" ng-false-value="0" class="form-checkbox reset-margin">

Can somebody help me with this?