php - IONIC Accordion 列表 + Angular JS + PHP 表单发布

Question

我正在使用 ionic Accordion 列表，因此表单输入被发送到数据库为空。当我不使用 'ng-repeat="groups in groups"时，我可以将数据保存到数据库中。而且我很确定 insert.php 中没有问题。我希望有人帮助发送数据而不是空数据到 mysql。问题出在组数组上，在 Controller 中它无法识别输入值

    <ion-content ng-controller="CheckOutCtrl">
                <form>
                        <ion-list>
                            <!--Step 1 Billing Details-->        
                            <div ng-repeat="group in groups">
                                <ion-item class="item-stable checkout item ng-binding active" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
                                    <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
                                    &nbsp; 
                                    {{group.name}}
                                </ion-item>
                                <ion-item class="item-accordion" ng-repeat="item in group.items" ng-show="isGroupShown(group)">
                                    <input ng-required="true" ng-model="firstname" class="dumbie" type="text" placeholder="{{item.subName}}">
                                    <span class="error" ng-show="myForm.first_name.$error.required">First name is required!</span>

                                    <input ng-required="true" ng-model="lastname" class="dumbie" type="text" placeholder="{{item.subLName}}">
                                    <div role="alert"> <span class="error" ng-show="myForm.last_name.$error.required"> Last name is required!</span> </div>
                                    <input ng-required="true" ng-model="email" class="dumbie" type="text" placeholder=" {{item.subEmail}}">
                                    <div role="alert"> <span class="error" ng-show="myForm.email.$error.required"> Email is required!</span>  </div>

                                    <input class="dumbie" ng-model="telephone" type="text" placeholder=" {{item.subTelephone}}">

                                </ion-item>
                            </div>
        </ion-list>
        </form>
        </ion-content>

Controller->

.controller('CheckOutCtrl', function ($scope, $http) {
           $scope.insertdata=function(){
                        var link = 'http://edu.local/fb_store/www/templates/insert.php';
                        $http.post(link,{"firstname":$scope.firstname,"lastname":$scope.lastname,"email":$scope.email,"telephone":$scope.telephone})
                                .success(function(data,status,headers,config){
                                    console.log("Data inserted successfully");
                        });
                    };


            $scope.groups = [];


            $scope.groups = [
                {name: 'Step 1: Billing Details', id: 1, items: [{subName: 'First Name', subLName: 'Last Name', subEmail: 'Email', subTelephone: 'Telephone', subFax: 'Fax', subCompany: 'Company', subAddress1: 'Address 1', subAddress2: 'Address 2', subCity: 'City', subPostal: 'Postal Code', subCountry: 'Sri Lanka', subRegion: 'Northern Province', subId: '1-1'}]}
                // { name: 'Step 5: Confirm Order', id: 1, items: [{ subName: 'SubGrup1', subId: '1-1' }, { subName: 'SubGrup1', subId: '1-2' }]},
            ];

            $scope.toggleGroup = function (group) {
                if ($scope.isGroupShown(group)) {
                    $scope.shownGroup = null;
                } else {
                    $scope.shownGroup = group;
                }
            };
            $scope.isGroupShown = function (group) {
                return $scope.shownGroup === group;
            };

        });

Answer 1

尝试用对象包装所有 ng-model 内容。

<ion-item>
    <input ng-required="true" ng-model="object.firstname" class="dumbie" type="text" placeholder="{{item.subName}}">
    <input ng-required="true" ng-model="object.lastname" class="dumbie" type="text" placeholder="{{item.subLName}}">
    <input ng-required="true" ng-model="object.email" class="dumbie" type="text" placeholder=" {{item.subEmail}}">
    <input class="dumbie" ng-model="object.telephone" type="text" placeholder=" {{item.subTelephone}}">
</ion-item>

app.controller('CheckOutCtrl', function ($scope, $http) {
    $scope.object={};
    $scope.insertdata=function(){
         var link = 'http://edu.local/fb_store/www/templates/insert.php';
         $http.post(link,$scope.object)
           .success(function(){
                 console.log("Data inserted successfully");
         })                                          
      });
    };
});