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

【问题标题】：Angular JS: Making a table cell password typeAngular JS：制作表格单元格密码类型
【发布时间】：2015-08-01 11:49:33
【问题描述】：

我使用 Angular JS 并创建一个表，该表是一种具有用户名、密码、文件路径信息的属性表。当第一个 col 值是密码时，其对应的第二个 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;
}

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}]
    };
});

【问题讨论】：

你能把它放在一个小提琴或一个plunker吗？我很难想象当时的情况

标签： angularjs html user-interface

【解决方案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>

希望这会有所帮助。如果我遗漏/误解了什么，请告诉我。

【讨论】：

谢谢大安，我会试试的，让你知道。较旧的行不固定，具有“密码”的行可以位于任何索引（行号）。所以我想通过第一个 col 值来确认，如果它是“密码”，那么下一个 col 应该显示为密码类型。和行数也有所不同。再次感谢您的回复...
不客气。如果它适合您，请将其设置为接受的答案。如果您还有其他问题，我会在这里;）
嗨 Daan，这是我的示例程序...plnkr.co/edit/DGQ8QDAxJaJ2js8t91A5?p=preview 在这里您可以看到密码，因为我将其设置为绿色，现在我想用星号显示它，而不是显示实际的密码字符串。我确实尝试过在 tejTemplate 中使用条件语句，但它将语句显示为字符串。我可以添加像哪个字段是密码的控件吗？
是的，您注释掉的 tejTemplate2 确实有效：plnkr.co/edit/haO3CWZp8vLR0xonSLKn?p=preview。可以看到，仅对密码输入，已设置为 type="password"。您还遇到的问题是，如果 enableCellEdit 设置为 true，它还会在双击时自动创建一个输入。我通过将 enableCellEdit 设置为 false 并在开关中添加一个输入字段作为默认值解决了这个问题
这意味着您正在覆盖 ng-grid 的功能。