Ionic Framework - 如何提交包含动态内容的表单？

Question

我有一些使用 ng-repeat 动态生成的 texbox：

<ion-content>

    <div class="matchList">

        <div class="matchListItem" ng-repeat="match in matchData">

            <div class="home-team-name">
                {{match.Team1.TeamName}}
            </div>

            <div class="tip-input">
                <input type="text" style="border:1px solid #CCC; width:100%; height:23px; padding-left:4px;" />
            </div>

            <div class="tip-center">
                <center>:</center>
            </div>

            <div class="tip-input">
                <input type="text" style="border:1px solid #CCC; width:100%; height:23px; padding-left:4px;" />
            </div>

            <div class="guest-team-name">
                {{match.Team2.TeamName}}
            </div>

            <div style="clear:both"></div>
        </div>

    </div>

    <div class="save-button">
        <button class="button button-block button-positive" ng-click="save()">
            Save
        </button>
    </div>
</ion-content>

这是足球联赛的提示游戏。因此，比赛日的每场比赛都有两个文本框。我想将文本框的值发送到 php 文件。我知道我可以这样做：

$scope.save = function () {

    $http.get('http://localhost/saveTips.php?data=' + data).then(function (response) {
        $scope.doesItWork = response.data;
    })

}

但是如何将每个文本框的值保存在数据变量中以将其发送到 php 文件？

Answer 1

您将在每个输入上使用ng-model，然后将数组发布到服务器。在服务器上，您必须接受 match 对象的数组。

假设您的 match 对象是

match:{
  Team1:{
    TeamName:'',
    InputValue:''
  },
  Team2:{
    TeamName:'',
    InputValue:''
  }
}

那么您的输入将有 ng-model="match.Team1.InputValue"（或 Team2）

另外，您应该使用$http.post('http://localhost/saveTips.php', data) 并更改您的 php 文件以接受 POST 请求，因为看起来您正在保存数据。

Answer 2

您需要将模型归因于字段，以允许访问控制器上的数据。 你可以做一些简单的事情，比如将数据存储在一个数组上（一个新的，甚至是你执行 ng-repeat 的同一个数组，如这个简单的例子所示。）

<input type="text" ng-repeat="input in inputs" ng-model="input.model" />

Live JSFiddle

如果你想看一个更复杂的例子，请告诉我，但我认为你可以得到这个想法。