在 Angular js 中使用 ng Repeat 单独访问动态输入文本控制文本

问题描述 投票:0回答:2

此图显示了我如何根据使用 ng-repeat 指令从数据库检索的不同任务数量动态创建行

<tr ng-repeat="task in tasks">
    <td>{{task}}</td>
    <td><input type="text" ng-model="day1"></td>
    <td><input type="text" ng-model="day2"></td>
    <td><input type="text" name="day3"></td>
    <td><input type="text" name="day4"></td>
    <td><input type="text" name="day5"></td>
    <td><input type="text" name="day6"></td>
    <td><input type="text" name="day7"></td>
</tr>

我已使用此代码来创建这些行。行数取决于从数据库检索的任务。 我的问题是,当用户在上述输入框中填写信息时,如何通过单独访问每个输入控件来获取该数据?因为即使我命名输入框,许多框也会具有与 ng-repeat 中相同的名称。 任务数量是动态的:

var fetch = angular.module('myApp', []);

fetch.controller('myController', ['$scope', '$http', function ($scope, $http) {
    $http({
        method: 'get',
        url: 'getTasks.php'
    }).then(function successCallback(response) {
    // Store response data
    $scope.tasks = response.data;
});

那么如何将动态任务数与固定天数联系起来 这是通过 PHP 获取的响应数据

<?php
....
$sql = "select * from `assigned_projects` where `EID`='$getid' and `PID`='$p'";
$res = mysqli_query($db,$sql);
$data = array();
while ($row = mysqli_fetch_array($res)) {
    $temp = array();
    $temp = explode(",",$row['Tasks']);
    $data = array_merge($data,$temp);       
}
echo json_encode($data);
?>

如果我的问题不清楚,或者是否需要任何其他代码片段来使这个问题更清楚,请告诉我

angularjs
2个回答
0
投票

您应该将日期输入链接到特定记录,例如:

  <tr ng-repeat="task_Record in tasks">
    <td>{{task_Record.task}}</td>
    <td><input type="text" ng-model="task_Record.day1"></td>
    <td><input type="text" ng-model="task_Record.day2"></td>
    <td><input type="text" ng-model="task_Record.day3"></td>
    <td><input type="text" ng-model="task_Record.day4"></td>
    <td><input type="text" ng-model="task_Record.day5"></td>
    <td><input type="text" ng-model="task_Record.day6"></td>
    <td><input type="text" ng-model="task_Record.day7"></td>
  </tr>

所以你的 $scope 变量将是:

$scope.tasks = [{task:<value>,
                 day1:<value>,
                 day2:<value>,
                 day3:<value>,
                 day4:<value>,
                 day5:<value>,
                 day6:<value>,
                 day7:<value>},...
               ] ;

0
投票

请参阅下面的代码。

首先您需要正确管理您的数据。检查 $scope.tasks 数组。这是一系列任务。每个任务包含 7 个 天数据。

现在第二个任务是在以下任务的帮助下迭代这些任务 ng-重复。在这里您将获取任务中的数据。由于每个任务都会 包含日期详细信息,您将在点的帮助下访问它们 操作员。

<!DOCTYPE html>
<html ng-app="app">
<head>
</head>
<body ng-controller="ctrl">
    <table>
        <tr ng-repeat="task in tasks">
            <!--<td>{{task}}</td>-->
            <td><input type="text" ng-model="task.day1"></td>
            <td><input type="text" ng-model="task.day2"></td>
            <td><input type="text" ng-model="task.day3"></td>
            <td><input type="text" ng-model="task.day4"></td>
            <td><input type="text" ng-model="task.day5"></td>
            <td><input type="text" ng-model="task.day6"></td>
            <td><input type="text" ng-model="task.day7"></td>
        </tr>
    </table>

    <script src="../lib/angular.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('ctrl', function ($scope) {
            $scope.tasks = [
                {
                    'day1': '1.1',
                    'day2': '1.2',
                    'day3': '1.3',
                    'day4': '1.4',
                    'day5': '1.5',
                    'day6': '1.6',
                    'day7': '1.7',
                },
                {
                    'day1': '2.1',
                    'day2': '2.2',
                    'day3': '2.3',
                    'day4': '2.4',
                    'day5': '2.5',
                    'day6': '2.6',
                    'day7': '2.7',
                },
                {
                    'day1': '3.1',
                    'day2': '3.2',
                    'day3': '3.3',
                    'day4': '3.4',
                    'day5': '3.5',
                    'day6': '3.6',
                    'day7': '3.7',
                }
            ]
        });
    </script>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.