【问题标题】:Display items from checkbox array angularjs显示来自复选框数组 angularjs 的项目
【发布时间】:2016-09-09 02:27:40
【问题描述】:

我这里有这段代码

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,然后将选定的 ID 保存到一个数组中,现在我正在尝试将数组中的选定项目显示到一个 html 页面中。 知道我该怎么做。

非常感谢

【问题讨论】:

    标签: angularjs ionic-framework


    【解决方案1】:

    您可以在 Angular 中使用 ngRepeat 来显示这些值。

      <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

    【讨论】:

    • 非常感谢,我是认真的 :)
    【解决方案2】:

    只需在模板中使用 ng-repeat:

    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>
        <ul ng-repeat="selectedObject in selectedObjects">
          <li>{{ selectedObject.model_number }}</li>
    </ion-content>
    
    </html>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2011-08-30
      • 1970-01-01
      • 2017-08-12
      • 2018-06-01
      • 1970-01-01
      • 2017-06-09
      • 1970-01-01
      相关资源
      最近更新 更多