2016-09-08 111 views
0

我這裏有這個代碼顯示項目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>

它只是複選框的IDS從Datajson然後選擇一個保存到一個數組中,現在我想顯示將數組內的選定項目轉換爲html頁面。 任何想法我怎麼能做到這一點。

非常感謝

回答

2

你可以使用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

+0

非常感謝,我真的意味着它:) –

1

只是使用NG-重複在你的模板:

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>