显示checkbox数组angularjs中的项目 [英] Display items from checkbox array angularjs
本文介绍了显示checkbox数组angularjs中的项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我这里有这段代码
angular.module('ionic.example', ['ionic'])
.controller('LoginCtrl', function($scope) {
$scope.models = [{
"id": "0",
"model_number": "BT168562.3",
"rotor_drawing_number": 4.01591,
"material": "17-4 PH",
"number_of_lobes": "5/6",
"contour_length": 51.00,
"overall_length": 55.00,
"major_dia_in": 1.063,
"minor_dia_in": 0.761,
"rotor_head_dia_in": 1.000,
"thread_form": "N/A",
"rotor_weight_lbs": 11,
"rotor_ecc": 0.0755,
"compatibility_weatherford": "",
"compatibility_r_&_m": "TRUE",
"compatibility_dyna_drill": "",
"compatibility_mono_pv": "",
"compatibility_roper": "",
"stator_drawing_number": 4.0162,
"stator_length_in": 60.00,
"stator_contour_in": 52.00,
"cutback_top": 4.00,
"cutback_end": 4.00,
"tube_od": 1.6875,
"tube_id_ends": 1.38,
"tube_id_middle": 1.38,
"stator_number_of_stages": 2.3,
"stator_weight_lbs": 14,
"std_vector_nbr_55": 0.913,
"std_vector_nbr_hp": 0.913,
"fit_5_os_vector_nbr_55": 0.000,
"fit_5_os_vector_nbr_hp": 0.000,
"fit_1_0_os_vector_nbr_55": 0.000,
"fit_1_0_os_vector_nbr_hp": 0.000,
"fit_1_5_os_vector_nbr_55": 0.000,
"fit_1_5_os_vector_nbr_hp": 0.000,
"fit_2_0_os_vector_nbr_55": 0,
"fit_2_0_os_vector_nbr_hp": 0.000,
"2_us_vector_nbr_55": 0,
"2_us_vector_nbr_hp": 0,
"fit_1_5_us_vector_nbr_55": 0,
"fit_1_5_us_vector_nbr_hp": 0,
"fit_1_0_us_vector_nbr_55": 0.903,
"fit_1_0_us_vector_nbr_hp": 0.903,
"fit_5_us_vector_nbr_55": 0,
"fit_5_us_vector_nbr_hp": 0,
"fit_2_5_os_vector_nbr_55": 0,
"fit_2_5_os_vector_nbr_hp": 0,
"fit_3_os_vector_nbr_55": 0,
"fit_3_os_vector_nbr_hp": 0,
"tolerance": 0.010,
"nbr_thermal_expansion_coef": 0.000190,
"nbr_hp_thermal_expansion_coef": 0.000190,
"number_of_stages": 2.3,
"rev_per_gal": 9.25,
"torque_slope_ft_lb_psi": 0.29,
"pressure_per_stage_nbr_55_psi": 150,
"pressure_per_stage_nbr_hp_psi": 225,
"pressure_per_stage_nbr_hpx_psi": 235,
"plot_gpm_1": 20,
"plot_gpm_2": 30,
"plot_gpm_3": 40,
"slip_at_gpm_2": "15%",
"": 0,
"flow_range_low": 20,
"flow_range_high": 40,
"speed_range_low": 185,
"speed_range_high": 370,
"off_bottom_pressure": 31,
"max_diff_pressure_nbr": 345,
"max_diff_pressure_nbr_hpx": 541,
"stall_diff_pressure_nbr": 518,
"stall_diff_pressure_nbr_hpx": 851,
"max_torque_nbr": 100,
"max_torque_nbr_hpx": 157,
"stall_torque_nbr": 185,
},
{
"id": "1",
"model_number": "BT168565.0",
"rotor_drawing_number": 4.01530,
"material": "17-4 PH",
"number_of_lobes": "5/6",
"contour_length": 87.00,
"overall_length": 93.00,
"major_dia_in": 0.990,
"minor_dia_in": 0.714,
"rotor_head_dia_in": 1.100,
"thread_form": "N/A",
"rotor_weight_lbs": 16,
"rotor_ecc": 0.0690,
"compatibility_weatherford": "",
"compatibility_r_&_m": "TRUE",
"compatibility_dyna_drill": "",
"compatibility_mono_pv": "",
"compatibility_roper": "TRUE",
"stator_drawing_number": 4.01637,
"stator_length_in": 99.00,
"stator_contour_in": 91.00,
"cutback_top": 4.00,
"cutback_end": 4.00,
"tube_od": 1.6875,
"tube_id_ends": 1.38,
"tube_id_middle": 1.38,
"stator_number_of_stages": 5.0,
"stator_weight_lbs": 27,
"std_vector_nbr_55": 0.853,
"std_vector_nbr_hp": 0.853,
"fit_5_os_vector_nbr_55": 0.000,
"fit_5_os_vector_nbr_hp": 0.000,
"fit_1_0_os_vector_nbr_55": 0.863,
"fit_1_0_os_vector_nbr_hp": 0.863,
"fit_1_5_os_vector_nbr_55": 0.000,
"fit_1_5_os_vector_nbr_hp": 0.000,
"fit_2_0_os_vector_nbr_55": 0,
"fit_2_0_os_vector_nbr_hp": 0,
"2_us_vector_nbr_55": 0,
"2_us_vector_nbr_hp": 0,
"fit_1_5_us_vector_nbr_55": 0,
"fit_1_5_us_vector_nbr_hp": 0,
"fit_1_0_us_vector_nbr_55": 0,
"fit_1_0_us_vector_nbr_hp": 0,
"fit_5_us_vector_nbr_55": 0,
"fit_5_us_vector_nbr_hp": 0,
"fit_2_5_os_vector_nbr_55": 0,
"fit_2_5_os_vector_nbr_hp": 0,
"fit_3_os_vector_nbr_55": 0,
"fit_3_os_vector_nbr_hp": 0,
"tolerance": 0.010,
"nbr_thermal_expansion_coef": 0.000190,
"nbr_hp_thermal_expansion_coef": 0.000190,
"number_of_stages": 5.0,
"rev_per_gal": 15.72,
"torque_slope_ft_lb_psi": 0.19,
"pressure_per_stage_nbr_55_psi": 150,
"pressure_per_stage_nbr_hp_psi": 225,
"pressure_per_stage_nbr_hpx_psi": 235,
"plot_gpm_1": 25,
"plot_gpm_2": 40,
"plot_gpm_3": 55,
"slip_at_gpm_2": "15%",
"": 0,
"flow_range_low": 25,
"flow_range_high": 55,
"speed_range_low": 393,
"speed_range_high": 865,
"off_bottom_pressure": 67,
"max_diff_pressure_nbr": 750,
"max_diff_pressure_nbr_hpx": 1175,
"stall_diff_pressure_nbr": 1125,
"stall_diff_pressure_nbr_hpx": 1851,
"max_torque_nbr": 143,
"max_torque_nbr_hpx": 223,
"stall_torque_nbr": 393,
"stall_torque_nbr_hpx": 865
}
];
$scope.order = {};
$scope.format = function() {
$scope.modifiedOrder = [];
$scope.selectedObjects = [];
angular.forEach($scope.order, function(value, key) {
if (value) {
var filtered = $scope.models.filter(function(unit) {
return unit.id === key
});
$scope.selectedObjects.push({
"model_number": filtered[0].model_number,
"rotor_drawing_number": filtered[0].rotor_drawing_number
});
$scope.modifiedOrder.push(parseInt(key));
}
});
}
});
img {
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.container {
max-width: 100%;
margin:0 !important;
padding:0 !important;
}
.container img{
padding:0 !important;
margin:0 !mportant:
}
<html ng-app="ionic.example">
<head>
<meta charset="utf-8">
<title>Popups</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="https://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<ion-content ng-controller="LoginCtrl">
<ion-checkbox ng-repeat="model in models | filter:query" ng-model="order[model.id]" ng-change="format()">{{model.model_number}}</ion-checkbox>
<pre>
current order : {{modifiedOrder}} <br>
selected objects:{{selectedObjects}} </pre>
</ion-content>
</html>
它只是复选框来自Datajson的ID然后将所选的一个保存到一个数组中，现在我正在尝试将数组内的选定项目显示为一个html页面。
任何想法我该怎么做。
it's simply checkbox the ids from Datajson then save the selected one into an array , now i'm trying to display the selected items inside the array into a html page . any idea how can i do that .
非常感谢
推荐答案
您可以在Angular中使用 ngRepeat ，如下所示，以显示这些值。
You would use ngRepeat in Angular like following to display those values.
<div ng-repeat="object in selectedObjects">
Rotor Drawing Number: {{object.rotor_drawing_number}} <br>
model_number: {{object.model_number}} <br>
</div>
此处完全实施。 https://codepen.io/anon/pen/XjbOZO?editors=1010
这篇关于显示checkbox数组angularjs中的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
