堆栈内存溢出
  繁体   English   中英

如何使用Angular JS从复选框获取检查值

[英]How to get checked values from checkbox using Angular JS

 原文  2017-04-24 06:19:13  0   4    javascript/ angularjs/ arrays/ json

问题描述

是角度JS的新手。 我有以下复选框，数据来自Web服务： 

 <label ng-repeat="r  in MedicalConditions track by $index">
    <input ng-model="ids[$index]" type="checkbox" ng-checked="r.value"> 
       {{r.conditions_name}}
    </label>

在console.log中，值完全符合我的要求。 如何将值推入数组，即arr []并对其进行字符串化。 我试过这样的代码..

//获取医疗状况清单 

$scope.parameter = "{}";
$scope.class0 = "{}";
$http.get('http://192.168.1.129:8080/apartment//member/medical/conditions/list').then(function(response) {
    $scope.MedicalConditions = response.data.list;
});

  $scope.$watchCollection('ids', function(newVal) {     
       $scope.parameter.class0 = $scope.ids;
    }); 


$scope.alertdata = function() {
    var parameter = {
        "first_name": $scope.first_name,

        "role": [{
            "role_id": 1,
            "name": "Admin",
            "details": "text"
        }],
        "associated": [{
            "associated_id": 1,
            "associated_name": "Parent",
            "primary_member_id": 1
        }],
        "class0": $scope.ids
    }
    parameter = JSON.stringify(parameter);

4 个解决方案

解决方案1
 1  2017-04-24 06:33:44

可能这会有所帮助： 

 angular.module('app', []) .controller('Controller', function($scope) { $scope.ids = {}; $scope.arr = {}; $scope.MedicalConditions = {}; $scope.MedicalConditions[0] = {}; $scope.MedicalConditions[0].value= true; $scope.MedicalConditions[0].conditions_name= 'first value'; $scope.MedicalConditions[1] = {}; $scope.MedicalConditions[1].value= false; $scope.MedicalConditions[1].conditions_name= 'seconde value'; $scope.$watchCollection('ids', function(newVal) { $scope.parameter.class0 = $scope.ids; }); $scope.parameter = {}; $scope.parameter.firstname = 'dummy name'; $scope.parameter.class0 = $scope.ids; }); 
 <!DOCTYPE html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="script.js"></script> </head> <body ng-app="app"> <div ng-controller="Controller"> <label ng-repeat="r in MedicalConditions track by $index"> <input ng-model="ids[$index]" type="checkbox" ng-checked="r.value" > {{ r.conditions_name}} </label> <br> Parameter: {{parameter}} </div> </body> </html>

解决方案2
 1  2017-04-24 09:24:05

尝试如下... 

 var app = angular.module('exApp',[]); app.controller('ctrl', function($scope){ $scope.ids = []; $scope.arr = []; $scope.checkSelected = []; $scope.MedicalConditions = [{"conditions_name":"xxz","conditions_id":"1"}, {"conditions_name":"yyz","conditions_id":"2"}, {"conditions_name":"zzz","conditions_id":"3"}]; $scope.$watchCollection('ids', function(newVal) { for (var i = 0; i < newVal.length; ++i) { console.log(newVal[i]); $scope.arr.push(newVal[i]); } }); $scope.checkAllR = function () { $scope.checkAll = !$scope.checkAll; if ($scope.checkAll) { $scope.checkSelected = []; angular.forEach($scope.MedicalConditions, function (checkR) { checkR.check = $scope.checkAll; $scope.checkSelected.push(checkR); }); } else { $scope.checkSelected = []; angular.forEach($scope.MedicalConditions, function (checkR) { var idx = $scope.checkSelected.indexOf(checkR); checkR.check = $scope.checkAll; $scope.checkSelected.splice(idx, 1); }); } }; $scope.addChecked = function (checked) { if ($scope.checkSelected == undefined || $scope.checkSelected == null) { $scope.checkSelected = []; } var idx = $scope.checkSelected.indexOf(checked); // delete if exists if (idx > -1) { $scope.checkSelected.splice(idx, 1); checked.check = false; } // add else { $scope.checkSelected.push(checked); checked.check = true; } $scope.checkAll = $scope.checkSelected.length == $scope.MedicalConditions.length ? true : false; }; var parameter = { "first_name": $scope.first_name, "middle_name": $scope.middle_name, //"class0": /*stringified data ie, arr[] */ }; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body ng-app="exApp" ng-controller="ctrl"> Select All : <input type="checkbox" name="checkbox" value="1" ng-checked="checkAll" ng-click="checkAllR()"><br> <label ng-repeat="r in MedicalConditions"> <input type="checkbox" name="checkbox" class="check-nolabel" value="1" ng-checked="r.check" ng-click="addChecked(r)"> {{ r.conditions_name}} </label><br><br> {{checkSelected}} </body>

解决方案3
 0 已采纳  2017-04-24 08:34:04

<label ng-repeat="r  in MedicalConditions track by $index">
<input ng-model="ids[$index]" type="checkbox" ng-change="valCh(r)"> {{r.conditions_name}}
</label>

控制器代码如下所示： 

var postApp = angular.module('EntityApp', []);
postApp.controller('EntityAppCntroller', function($scope, $http, $window, $timeout, $location) {

    //To fetch Medical Conditions List    
        $http.get('http://111.222.444:8080/apartment//member/medical/conditions/list').then(function(response) {
            $scope.MedicalConditions = response.data.list;
        });
        var list = [];
        $scope.valCh = function(value) {
            list.push(value);
            JSON.stringify(list);
        }

        $scope.alertdata = function() {
            var parameter;
            parameter = {
                "parameter": {
                    "first_name": $scope.first_name,
                    "medicalconditions": list
                }
            }
            $http({
                url: 'http://111.222.333:8080/apartment//save/member/details',
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: JSON.stringify(parameter)
            }).success(function(data, status) {
                if (data.status == 'success') {
                    alert("User Created");
                    $location.reload();
                } else if (data.status == 'failure') {
                    alert("Some failure please try again later !!!");
                }
            });
        };
    });

解决方案4
 0  2017-04-24 09:44:49

希望这可以帮助。 

<div ng-app="myApp" ng-controller="MyCtrl">
    <label ng-repeat="r in MedicalConditions track by $index">
    <input ng-model="ids[$index]" 
      ng-init="ids[$index] = r.value"
      type="checkbox"> 
    {{r.condition}}
  </label>
</div>

这是您的控制器。 

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope){
    $scope.ids = [];

    $scope.MedicalConditions = [{
    _id: 1,
    value: true,
    condition: 'Condition 1'
  }, {
    _id: 2,
    value: false,
    condition: 'Condition 2'
  }, {
    _id: 3,
    value: true,
    condition: 'Condition 3'
  }];
});

JsFiddle

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用jQuery从两个表选中的复选框中获取值？ 如何使用jQuery从复选框组获取检查值 如何根据选中的复选框激活文本框并使用 Vue js 和 javascript 中的 v-model 从文本框中获取值？ 如何使用角度数组在复选框中显示选中的值？ 尝试使用Javascript从gridview获取复选框选中的行值 如何通过使用Angular JS从响应获取复选框值 如何获取复选框值并使用Jquery作为多维数组存储？ 如何使用angularjs获取选中的复选框值和选定的下拉值？ PHP和JS-如何选中并输入复选框以获取价值？ 如何从选中的复选框获取多个下拉值？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM