jeudi 3 septembre 2015

Get value of checkbox into angularjs $scope object

Im new to angularjs and i'm stuck on this piece of code since 2 days.

I want to get values from selected checkboxes inside my angular js controller.

I have tried using ng-true-vlaue and ng-false-value as well but nothing works.

Moreover, Its safe to say that controller portion works fine. All i need to know is how to safely get the value from the checked checkbox to my $scope variables.

Thank you.

HTML

<div class="md-checkbox">
                <input type="checkbox" id="checkbox8" class="md-check" ng-model="InstallerType.installType" value="Install Kits Complete System"/>
                <label for="checkbox8">
                    <span></span>
                    <span class="check"></span>
                    <span class="box"></span>
                    Install Kits Complete System
                </label>
            </div>

            <div class="md-checkbox">
                <input type="checkbox" id="checkbox9" class="md-check" ng-model="IndividualComponents.installType" value="Individual Components"/>
                <label for="checkbox9">
                    <span></span>
                    <span class="check"></span>
                    <span class="box"></span>
                    Individual Components
                </label>
            </div>

            <div class="md-checkbox">
                <input type="checkbox" id="checkbox10" class="md-check" ng-model="ShippingToSite.installType" value="Shipping To Customer Site"/>
                <label for="checkbox10">
                    <span></span>
                    <span class="check"></span>
                    <span class="box"></span>
                    Shipping To Customer Site
                </label>
            </div>

CONTROLLER

$scope.InstallerType = {
    installType: ''        
};

$scope.IndividualComponents = {
    installType: ''
};

$scope.ShippingToSite = {
    installType: ''
};

$scope.$watch('addInstallerForm.$valid', function (newVal) {

    $scope.IsFormValid = newVal;

});

$scope.AddInstaller = function () {

    $scope.Submitted = true;
    if ($scope.IsFormValid) {
        InstallerService.AddNewInstaller($scope.Installer, $scope.InstallerSize, $scope.InstallerType, $scope.IndividualComponents, $scope.ShippingToSite, $scope.User).then(function (i, is, cs, ic, sts, u) {

            if (i.data.firstName != null) {
                $scope.IsLoggedIn = true;
                alert('Registration Successful.');
            }

            else {
                alert('Registration Failed.');
            }
        });
    }
};

})

FACTORY

var fac = {};
fac.AddNewInstaller = function (i, is, cs, ic, sts, u) {

    var obj = {};

    obj.i = i;
    obj.u = u;
    obj.is = is;
    obj.ic = ic;
    obj.cs = cs;
    obj.sts = sts;

    var string = JSON.stringify(obj);

    return $http({
        url: '/Database/AddNewInstaller',
        method: 'POST',
        data: string,
        headers: { 'content-type': 'application/json' }

    });

};




Aucun commentaire:

Enregistrer un commentaire