Cách lấy giá trị từ Form Dynamic trong Angualarjs và Ionic

[chinguyenvc]

Chào mọi người mình mới sử dụng AngualarJS và IONIC mình render ra 1 cái form động. Giờ mình muốn khi người dùng Click vào LƯU THAO TÁC thì làm cách nào để get được toàn bộ dữ liệu trong các input. Nếu trong Jquery thuần thì mình dùng foreach các thẻ <input name='full_name[]'/>

[Vũ]

@chinguyenvc Nó chỉ là các model bình thường thôi bạn ? Khi click thì model đó đã cập nhật dữ liệu thay đổi của người dùng rồi. Mình chỉ việc gửi dữ liệu đó về Server là đc. Ý tưởng là như thế

[chinguyenvc]

@Vũ Nếu form bình thường thì mình thấy nó tự động cập nhật nhưng trong form này mình có sử dụng 1 Directive bên ngoài là https://inmagik.github.io/ionic-modal-select/#/app/examples => Hình như nó không tự động cập nhật dữ liệu vào model.

Nghĩa là khi mình select thì nó không làm sao để liên kết được dữ liệu.

Skype của @Vũ là gì để mình add vào hỗ trợ mình nhé. Skype của mình là chinguyen.van

[Vũ]

@chinguyenvc Như link ví dụ bạn gửi nó hoạt động mà ?

[chinguyenvc]

@Vũ Nó hoạt động được nhưng khi mình select thì nó không tự động bind giá trị của select mình vừa chọn vào array.

[Vũ]

@chinguyenvc Bạn gửi đoạn code của mình lên đây mọi người xem cho ?

[chinguyenvc]

@Vũ

Đây là controller của mình

controller('InfoCtrl', function($scope,$location,$http,$ionicLoading,$timeout,$ionicPopup,$ionicPlatform, serviceFunction) {

    // Get variable
    var hanh_trinh   = sessionStorage.getItem('hanh_trinh');
    var noi_di       = sessionStorage.getItem('noi_di');
    var noi_den      = sessionStorage.getItem('noi_den');
    var noi_di_name  = sessionStorage.getItem('noi_di_name');
    var noi_den_name = sessionStorage.getItem('noi_den_name');
    var ngay_di      = sessionStorage.getItem('ngay_di');
    var ngay_ve      = sessionStorage.getItem('ngay_ve');
    var ngay_di_ex   = sessionStorage.getItem('ngay_di_ex');
    var ngay_ve_ex   = sessionStorage.getItem('ngay_ve_ex');
    var nguoi_lon    = sessionStorage.getItem('nguoi_lon');
    var tre_em       = sessionStorage.getItem('tre_em');
    var tre_so_sinh  = sessionStorage.getItem('tre_so_sinh');

    $ionicLoading.show({
        template: '<ion-spinner class="spinner-energized" icon="circles"></ion-spinner> <p>Hệ thống đang xử lý...</p>',
        content: 'Loading',
        animation: 'fade-in',
        showBackdrop: true,
        maxWidth: 200,
        showDelay: 0
    });

    $timeout(function () {
        $ionicLoading.hide();
    }, 0000);

    $scope.pack_vj = {
        vjs : [
            {id: 0, name: "Không chọn hành lý", selected: true},
            {id: 1, name: "Gói 15kg - 143.000 VNĐ", selected: true},
            {id: 2, name: "Gói 25kg - 165.000 VNĐ", selected: false},
            {id: 3, name: "Gói 30kg - 220.000 VNĐ", selected: false},
            {id: 4, name: "Gói 35kg - 330.000 VNĐ", selected: false}
        ],
        vj: null
    };

    $scope.select_pack_vjs = [
        {id: 0, name: "Không chọn hành lý"},
        {id: 1, name: "Gói 15kg - 143.000 VNĐ"},
        {id: 2, name: "Gói 25kg - 165.000 VNĐ"},
        {id: 3, name: "Gói 30kg - 220.000 VNĐ"},
        {id: 4, name: "Gói 35kg - 330.000 VNĐ"}
    ];

    $scope.pack_bl = {
        bls : [
            {id: 0, name: "Không chọn hành lý", selected: true},
            {id: 1, name: "Gói 15kg - 143.000 VNĐ", selected: true},
            {id: 2, name: "Gói 25kg - 165.000 VNĐ", selected: false},
            {id: 3, name: "Gói 30kg - 220.000 VNĐ", selected: false},
            {id: 4, name: "Gói 35kg - 330.000 VNĐ", selected: false}
        ],
        bl: null
    };

    // Chức danh
    $scope.role_adult = {
        adults : [
            {id: 1, name: "Ông", selected: true},
            {id: 2, name: "Bà", selected: false},
        ],
        adult: null
    };

    $scope.select_adults = [
        {role: 1, name: "Ông"},
        {role: 2, name: "Bà"},
    ];

    $scope.role_child = {
        childs : [
            {id: 1, name: "Anh", selected: false},
            {id: 2, name: "Chị", selected: false}
        ],
        child: null
    };

    $scope.select_childs = [
        {id: 1, name: "Anh"},
        {id: 2, name: "Chị"},
    ];

    $scope.role_kid = {
        kids : [
            {id: 1, name: "Bé trai", selected: true},
            {id: 2, name: "Bé gái", selected: false},
        ],
        kid: null
    };

    $scope.select_kids = [
        {id: 1, name: "Bé trai"},
        {id: 2, name: "Bé gái"},
    ];


    // Get session ticket
    var ticket_one_info     = sessionStorage.getItem('session_ticket_one');
    var ticket_round_info   = sessionStorage.getItem('session_ticket_round');
    var ticket_one_info     = JSON.parse(ticket_one_info);
    var ticket_round_info   = JSON.parse(ticket_round_info);

    $scope.res_hanh_trinh     = hanh_trinh;
    $scope.res_diem_di        = noi_di_name;
    $scope.res_diem_den       = noi_den_name;
    $scope.res_diem_di_code   = noi_di;
    $scope.res_diem_den_code  = noi_den;
    $scope.res_ngay_di        = ngay_di_ex;
    $scope.res_ngay_ve        = ngay_ve_ex;

    $scope.res_nguoi_lon     = nguoi_lon;
    $scope.res_tre_em        = tre_em;
    $scope.res_tre_so_sinh   = tre_so_sinh;

    $scope.res_air_flight_one     = ticket_one_info['AirFlight'];
    $scope.res_air_class_one      = ticket_one_info['AirClass'];
    $scope.res_hour_start_one     = ticket_one_info['hour_start'];
    $scope.res_hour_end_one       = ticket_one_info['hour_end'];
    $scope.res_total_price_one    = ticket_one_info['Total_Price_f'];

    if(!serviceFunction.isEmpty(ticket_round_info)){
        $scope.res_air_flight_round     = ticket_round_info['AirFlight'];
        $scope.res_air_class_round      = ticket_round_info['AirClass'];
        $scope.res_hour_start_round     = ticket_round_info['hour_start'];
        $scope.res_hour_end_round       = ticket_round_info['hour_end'];
        $scope.res_total_price_round    = ticket_round_info['Total_Price_f'];
    }

    $scope.range = function(min, max, step){
        step = step || 1;
        var input = [];
        for (var i = min; i <= max; i += step) input.push(i);
        return input;
    };


    // Build form info adult
    var data_adults = [];
    var data_childs = [];
    var data_kids   = [];

    var pack_adults   = [];
    var pack_childs   = [];

    if(nguoi_lon>0){
        for(var i=1; i <= nguoi_lon; i++) {
            data_adults.push({ id: i, role: '', name : ""}); 
        }
        $scope.data_adults = data_adults;
    }

    if(tre_em>0){
        for(var i=1; i <= tre_em; i++) {
            data_childs.push({ id: i, role: '', name : ""}); 
        }
        $scope.data_childs = data_childs;
    }


    if(tre_so_sinh>0){
        for(var i=1; i <= tre_so_sinh; i++) {
            data_kids.push({ id: i, role: '', name : "", birthday : ""}); 
        }
        $scope.data_kids = data_kids;
    }

    // Pack
    if(nguoi_lon>0){
        for(var i=1; i <= nguoi_lon; i++) {
            pack_adults.push({ id:i, role: '', name : ""}); 
        }
        $scope.pack_adults = pack_adults;
    }

     if(tre_em>0){
        for(var i=1; i <= tre_so_sinh; i++) {
            pack_childs.push({ id: i, role: '', name : ""}); 
        }
        $scope.pack_childs = pack_childs;
    }

    $scope.secondModel = null;
    
    $scope.selectableNames = [{
        name: "Mauro",
        role: "juggler"
    }, {
        name: "Silvia",
        role: "chef"
    }, {
        name: "Merlino",
        role: "little canaglia"
    }, ];

    $scope.getOpt = function(option) {
        return option.name + ":" + option.role;
    };

    // $scope.getOpt = function(option){
        
    //     //console.log(index);
    //     //console.log(JSON.stringify(data_adults[index]));
    //     //console.log(JSON.stringify(data_adults[index].name));
    //     //data_adults[index].role = role;
    //     //console.log(JSON.stringify(data_adults[index]));
    //     //console.log(JSON.stringify(data_adults));
    //     $scope.name_select  = option.name;
    //     $scope.role_select  = option.role;
    //     //return option.role;
    //     //return option.name;
    // };


    $scope.step_ticket_two = function() {
        //Check validate adult
        angular.forEach(data_adults, function(adults, k){
            angular.forEach(adults,function(v,k1){
                var index = k + 1;
                if(v===''){
                    if(k1=='role'){
                        $(".wap_nguoi_lon_"+index).addClass('error');
                        $ionicPopup.alert({
                            title: '<b>Thông báo</b>',
                            okText : 'Đóng lại',
                            template: '<h5 style="text-align:center">Chưa chọn chức danh</h5>'
                        });
                        document.getElementById("adult_role_"+k).addClass('error');
                    }else{
                        document.getElementById("adult_role_"+k).removeClass('error');
                    }

                    if(k1=='name'){
                        $ionicPopup.alert({
                            title: '<b>Thông báo</b>',
                            okText : 'Đóng lại',
                            template: '<h5 style="text-align:center">Chưa nhập tên</h5>'
                        });
                        document.getElementById("name_adult_"+k).addClass('error');
                    }else{
                        document.getElementById("name_adult_"+k).removeClass('error');
                    }
                    return false; // break    
                }
            });
        });
        //Check validate child
    }
    // get data form and save to session localhost
})

Đây là view mình đổ ra

<div class="label_info"><i class='ion ion-bag mr_5'></i> <b>Thông tin hành lý</b></div>
            <br/>
            
            <div class="label_info"><p><i class='ion ion-android-arrow-dropright mr_5'></i> Hành lý chiều đi</p></div>

            <div class="list list-inset" data-ng-repeat="(index, pack_adult) in pack_adults">
                <p>Người lớn {{index+1}}</p>

                <div class="item_select mb_15">
                    <div class="wap_in_select select_pos_relative">
                        <input class='in_select' ng-value="{{adult.name}}" ng-model="name_select" disabled="disabled" placeholder="Chọn gói hành lý">
                        <button class="button btn_select select_pos_absolute" modal-select="" ng-model="name_select" options="select_pack_vjs" option-getter="getOpt(option)" modal-title="Chọn gói hành lý" cancel-button = 'Hủy bỏ' reset-button = 'Xóa giá trị'>
                            <div class="option"><h2>{{option.name}}</h2></div>
                        </button>
                        <i class = "icon icon ion-android-arrow-dropdown icon_select_left"></i>
                    </div>
                    <input id='adult_pack_{{index}}' value="{{name_select}}" type="hidden">     
                </div>
            </div>

            <div class="list list-inset" data-ng-repeat="(index, pack_child) in pack_childs">
                <p>Trẻ em {{index+1}}</p>
                <ion-search-select title="Chọn gói hành lý" key-property="id" value-property="name" options="pack_bl.bls" option-selected="pack_bl.bl">
                    <label class="item item-input-inset" style="border:none;padding: 0px;cursor: pointer;">
                        <div class="item-input-wrapper custom_input_select">
                            <i class="icon ion-android-arrow-dropdown mr_5"></i>
                            <input class='input_select' type="text" ng-model="pack_bl.bl.name" placeholder="Chọn gói hành lý">
                            <input id='pack_child{{n}}' type='hidden' value="{{pack_bl.bls.id}}">
                        </div>
                    </label>
                </ion-search-select>
            </div>

            <div class="wap_pack_round" ng-show="res_hanh_trinh==2">
                <div class="label_info"><p><i class='ion ion-android-arrow-dropright mr_5'></i> <b> Hành lý chiều về</b></p></div>

                <div class="list list-inset" data-ng-repeat="(index, pack_adult ) in pack_adults">
                    <p>Người lớn {{n}}</p>
                    <ion-search-select title="Chọn gói hành lý" key-property="id" value-property="name" options="pack_vj.vjs" option-selected="pack_vj.vj">
                        <label class="item item-input-inset" style="border:none;padding: 0px;cursor: pointer;">
                            <div class="item-input-wrapper custom_input_select">
                                <i class="icon ion-android-arrow-dropdown mr_5"></i>
                                <input class='input_select' type="text" ng-model="pack_vj.vj.name" placeholder="Chọn gói hành lý">
                                <input id='pack_adult_2{{n}}' type='hidden' value="{{pack_vj.vj.id}}">
                            </div>
                        </label>
                    </ion-search-select>
                </div>

                <div class="list list-inset" data-ng-repeat="(index, pack_child) in pack_childs">
                    <p>Trẻ em {{n}}</p>
                    <ion-search-select title="Chọn gói hành lý" key-property="id" value-property="name" options="pack_vj.vjs" option-selected="pack_vj.vj">
                        <label class="item item-input-inset" style="border:none;padding: 0px;cursor: pointer;">
                            <div class="item-input-wrapper custom_input_select">
                                <i class="icon ion-android-arrow-dropdown mr_5"></i>
                                <input class='input_select' type="text" ng-model="pack_vj.vj.name" placeholder="Chọn gói hành lý">
                                <input id='ipack_child_2' type='hidden' value="{{pack_vj.vj.id}}">
                            </div>
                        </label>
                    </ion-search-select>
                </div>

            </div>

Minh xin tóm tắt sơ lược như sau.

Khi mình tìm kiếm vé máy bay giả sử là 2 người lớn. Thì mình sẽ lưu lại số người. Từ số người này mình sẽ render ra các thông tin theo số người. Ví dụ 2 người thì sẽ render ta 2 khung select để cho KH nhập họ và tên và đồng thời chọn chức danh ( mình sử dụng Select Modal Ionic như link đã đính kèm bên trên. Đây là Direvtive bên ngoài ).

Vấn đề xảy ra là khi mình nhập TÊN thì hệ thống tự động bind data vào mảng data_adults trong controller nhưng khi mình select CHỨC DANH (ông hay bà) thì hệ thống không nhận được data từ select (Biến Role trong data_adults ). Mình không biết các liên kết dữ liệu khi select như vậy

Link hình ảnh :

P/S: Mình đang sử dụng Ionic Modal Select

[Vũ]

@chinguyenvc Đoạn include module phụ thuộc ionic-modal-select của dự án đâu bạn ?

angular.module('starter', ['ionic', 'ngCordova', 'ionic-modal-select'])

.run(function($ionicPlatform) {
    // other config ...
})

[chinguyenvc]

@Vũ

Mình để nó ở đây bạn

angular.module('starter', ['ionic', 'starter.controllers', 'ion-datetime-picker', 'ionic-modal-select'])
.run(function($ionicPlatform, $ionicPickerI18n) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);
        }

        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }

        $ionicPickerI18n.weekdays = ["T2", "T3", "T4", "T5", "T6", "T7", "CN"];
        $ionicPickerI18n.months = [" Tháng 1", " Tháng 2", " Tháng 3", " Tháng 4", " Tháng 5", " Tháng 6", " Tháng 7", " Tháng 8", " Tháng 9", " Tháng 10", " Tháng 11", " Tháng 12"];
        $ionicPickerI18n.ok = "Chọn";
        $ionicPickerI18n.cancel = "Hủy chọn";
        $ionicPickerI18n.okClass = "button-positive";
        $ionicPickerI18n.cancelClass = "button-assertive";
    });
})

[Vũ]

Vấn đề xảy ra là khi mình nhập TÊN thì hệ thống tự động bind data vào mảng data_adults trong controller nhưng khi mình select CHỨC DANH (ông hay bà) thì hệ thống không nhận được data từ select (Biến Role trong data_adults ). Mình không biết các liên kết dữ liệu khi select như vậy

Do bạn chưa biết cách tổ chức dữ liệu thôi. Chứ vấn đề không phải module: ionic-modal-select. Bạn tham khảo đoạn code này và hoàn thiện thêm nhé !

Code: https://jsfiddle.net/vunb/wbcor8yf/1/

P/s: Lần sau bạn vui lòng mô tả rõ vấn đề của bạn, và đưa đầy đủ thông tin, cụ thể là bạn đang gặp vấn đề về lưu trữ TÊN và CHỨC DANH của hành khách, nhưng đoạn HTML bạn đưa lên thì không hề có ? Rất ngại khi phải xem code của bạn, nhiều mà không đủ thông tin

[chinguyenvc]

Mình làm được rồi. Cảm ơn bạn đã nhiệt tình giúp đỡ nhé. Mới làm cái này nên còn gặp nhiều sơ suất. (Thiếu HTML TÊN và CHỨC DANH ).

Thanks bạn nhiều.

[chinguyenvc]

@Vũ

Nếu mình làm như https://jsfiddle.net/vunb/wbcor8yf/1/ thì mình thấy nó vấn đề là Khi mình nhập dữ liệu vào ô TÊN thì nó sẽ tự động Bind dữ liệu vào ô CHỨC DANH. => Do đó mình không thể hiển thị tên chức danh là ÔNG hoặc BÀ được.

Nghĩa là khi mình Click chọn một chức danh nào đó thì trong ô dữ liệu không hiển thị được tên chức danh vừa chọn. Cái thứ 2 là khi mình nhập HỌ TÊN ô bên dưới thì hệ thống lại tự động bind data nên do. đang trung ng-model = ''adult.name"

Có cách nào xử lý vấn đề này không bạn @Vũ

[Vũ]

@chinguyenvc Thì bạn phải tự sửa lại code của mình sau khi đã hiểu được nguyên lý hoạt động của nó đi chứ ?

Giờ thay vì chỉ lưu tên, thì bạn lưu cả đối tượng Role vào data_adults ?

Đoạn code cập nhật lại thế này, bạn xem có đúng ý của bạn hay có khó khăn gì khác không ? Tại mình thấy sửa cái này rất đơn giản: https://jsfiddle.net/vunb/wbcor8yf/3/