Angular JS:创建一个表格单元格密码类型

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

可以使用Angular js。

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

我遵循链接示例

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

如果我理解正确，你想有一个单元格的表具有相同的行为与类型设置为密码的输入字段?
<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中不起作用，因为表单不允许成为表、body或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>
希望这对你有帮助。如果我错过或误解了什么，请告诉我。

相关内容

最新更新

热门标签：