Question

我使用Angular JS并创建一个表，它是一种具有用户名，密码，文件路径信息的属性表。当第一个col值为password时，其对应的第二个col应该被视为密码字段。

可以使用Angular js。

总的来说，我想让桌子的单元格自定义。

我正在关注链接示例

HTML

<html ng-app="myApp">  
    <head lang="en">
        <meta charset="utf-8">
        <title>Getting Started With ngGrid Example</title>  
        <link rel="stylesheet" type="text/css" href="ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="jquery-1.8.2.js"></script>
        <script type="text/javascript" src="angular.js"></script>
        <script type="text/javascript" src="ng-grid-1.3.2.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
</html>

CSS

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px;
}

JS

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "ProfileName", value: "MyProfile"},
                     {name: "UserName", value: "john"},
                     {name: "Password", value: "showBePasswordType"},
                     {name: "Other", value: "nothing"}];
    $scope.gridOptions = { 
        data: 'myData',
        enableCellSelection: true,
        enableRowSelection: false,
        enableCellEdit: true,
        columnDefs: [{field: 'name', displayName: 'Name', enableCellEdit: true}, 
                     {field:'value', displayName:'Value', enableCellEdit: true}]
    };
});

Answer 1

如果我理解正确，您希望表中的一个单元格与输入字段具有相同行为且类型设置为密码？

<input type="password">

您可以坚持使用HTML输入类型标识符，并检查您要处理的类型以在HTML中打印出正确的输入。

<input ng-switch-when="text" type="text" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}">
<input ng-switch-when="password" type="password" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}">
<input ng-switch-when="email" type="email" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}">

您的问题要求提供表格，并且由于您已将HTML5设置为标记，因此我假设您正在使用此标记。那么你可以简单地在表格单元格中包含输入字段。（请注意，这在HTML4中不起作用，因为表单不允许是表，tbody或tr的子元素。

<form method="GET" id="my_form"></form>

<table>
    <tr>
        <td>
            <input ng-switch-when="password" type="password" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}">
        </td>
    </tr>
</table>

希望这会有所帮助。如果我错过/误解了某些内容，请告诉我。

Angular JS：制作表格单元格密码类型

1 个答案: