2015-05-20 3 views
0

Я использую Angular JS и создаю таблицу, которая является видом таблицы свойств, которая имеет имя пользователя, пароль, информацию о файлах. Когда первым значением col является пароль, то его соответствующий второй col должен обрабатываться как поле пароля.Угловой JS: Создание типа ячейки ячейки таблицы

Возможно использование угловых 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}] 
    }; 
}); 
+0

Не могли бы вы поместить его в скрипку или плункер? Мне сложно попытаться представить ситуацию – Okazari

ответ

0

Если я правильно понял, вы хотите иметь одну ячейку таблицы, которая имеет такое же поведение, как поле ввода с типом, установленным для пароля?

<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 или тра.

<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> 

Надеется, что это помогает. Пожалуйста, дайте мне знать, если я пропустил/не поняли что-то.

+0

Спасибо Daan, я попробую и дам вам знать. Старшая строка не фиксирована, строка «пароль» может быть в любом индексе (номер строки). Поэтому я хочу подтвердить по первому значению столбца, если это «пароль», тогда следующий столбец должен отображаться как тип пароля, а число строк также меняется. Спасибо еще раз для ответа ... –

+0

Добро пожаловать. Если он работает для вас, пожалуйста, установите его как принятый ответ. Если у вас появятся дополнительные вопросы, я буду здесь;) –

+0

Привет, Даан, Это моя примерная программа ... http://plnkr.co/edit/DGQ8QDAxJaJ2js8t91A5?p=preview Здесь вы можете видеть для Пароль, поскольку я делаю это зеленый цвет, теперь я хочу показать его в звездочке, а не показывать фактическую строку пароля. Я пробовал с условным выражением в tejTemplate, но показывал инструкцию как строку. Могу ли я добавить элемент управления, например какое поле является паролем? –