[asp.net]进入 angularjs $scope 对象的值的复选框

发布时间: 2017/3/26 2:53:03
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

Im 新到 angularjs 和我对这段代码自 2 日以来被困。

我想要从所选复选框里面我角 js 控制器中获取值。

我试过用吴真值和吴-假-值以及但什么在起作用。

此外,可以说该控制器部分工作正常。我需要知道的就是如何安全地获得选中的复选框的价值对我 $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' }

    });

};

解决方法 1:

你可以将您的表单数据添加到一个 $scope 变量,因此您可以处理数据表单提交或与 ng-click

例如您的范围变量可能如下所示︰

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

但是你可以做任何你需要为你的应用程序的对象结构。不知道为什么添加了 installType 对您的对象。因为上述应该确定与工作。也许你可以想分组这些三成一个父对象,如果你有更多的东西的形式。

请看一看下面演示或在此的副手

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>

官方微信
官方QQ群
31647020