将复选框的值获取到 angularjs $scope 对象中

Question

我是 angularjs 的新手，自从 2 天以来我一直在使用这段代码。

我想从我的 Angular js 控制器中的选定复选框中获取值。

我也尝试过使用 ng-true-vlaue 和 ng-false-value，但没有任何效果。

此外，可以肯定地说控制器部分工作正常。我只需要知道如何安全地从选中的复选框中获取值到我的 $scope 变量。

谢谢。

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>

控制器

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

})

工厂

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

    });

};

Answer 1

您可以将表单数据添加到一个$scope 变量中，这样您就可以使用表单提交或ng-click 上的数据。

例如您的作用域变量可能如下所示：

$scope.myForm = {
    InstallerType: false,
    IndividualComponents: false,
    ShippingToSite: false
};

但您可以为您的应用创建所需的任何对象结构。不知道为什么您将installType 添加到您的对象中。因为上面应该可以使用。如果表单中有更多内容，也许您可​​以考虑将这三个分组为一个父对象。

请看下面的演示或fiddle。

angular.module('demoApp', [])
.controller('mainController', MainController);


function MainController($scope, $window) {
	$scope.submit = function(form) {
    	$window.alert('do somthing with form data: '+ JSON.stringify(form));
    };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <form ng-submit = "submit(myForm)">
        <div class="md-checkbox">
                <input type="checkbox" id="checkbox8" class="md-check" ng-model="myForm.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="myForm.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="myForm.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>
    <button tpye="submit">submit</button>
    {{myForm}}
    </form>


</div>