如何单击HTML行,然后在输入文本中显示行的值

时间:2017-09-28 09:45:37

标签: angularjs html5

如何点击HTML行,然后在输入文本中显示行的值,以便用户编辑它们。

控制器中的

$scope.data = [];


$scope.selectedMember = { Code: "", Latin: "", Local: "" }; //new property
$scope.showInEdit = function (member)
{
    $scope.selectedMember = member;
}

在ng-repeat中:

<table border="1" ng-hide="Hide">
        <thead>
            <tr>
                <th>Code</th>
                <th>Latin Description</th>
                <th>Local Description</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="c in Contracts | filter:Code | filter:Latin | filter:Local track by $index">

                <td><a href="#" ng-click="showInEdit(c)">{{c.Staff_Type_Code}}</a></td>
                <td>{{c.L_Desc}}</td>
                <td>{{c.A_Desc}}</td>
                <!--<td><input type="button" value="Edit" ng-click="Edit(c)"/> </td>-->
            </tr>
        </tbody>
    </table>

在HTML中:

<table>
            <tr>
                <td>Code</td>
                <td><input type="text" size="10" pattern="^[a-zA-Z0-9]+$" title="Alphnumeric" autofocus ng-model="selectedMember.Code.Staff_Type_Code"></td>
            </tr>
            <tr>
                <td>Latin Description</td>
                <td><input type="text" size="35" ng-model="Latin.L_Desc"></td>
            </tr>
            <tr>
                <td>Local Description</td>
                <td><input type="text" size="35" ng-model="Local.A_Desc"></td>
            </tr>

非常感谢

2 个答案:

答案 0 :(得分:0)

您只需要在

等函数中更新范围变量
$scope.Latin.L_Desc = c.example;

之后,您将在输入字段中看到这些值。

答案 1 :(得分:0)

如果您想在此代码中显示值

$scope.selectedMember = { Code: "", Latin: {A_Desc:""}, Local: {L_Desc:""} };

然后你的对象必须是这样的:

 $scope.showInEdit = function (member)
{
    $scope.selectedMember.Latin.L_Desc = member;
}

在控制器功能

User