Question

我是angularjs的新手，我从2天开始就坚持使用这段代码。

我想从我的角度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>

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

    });

};

Answer 1

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

E.g。您的范围变量可能如下所示：

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

获取angularjs $ scope对象的checkbox值

1 个答案: