将不同的数据类型放入动态列表

Question

我正在创建一个动态添加行的表，我想将已经在服务器上获得的输入类型（如果它是int，bool字符串等）放在服务器上，但是我想知道该怎么做字段接受组合框等

cshtml中的代码

http://localhost:3771/api/changelog?$expand=LogDetails&$filter=$apply=groupby((Priority), aggregate($count as Count))/all(o: o/Count eq 1)

Answer 1

一种方法是在字段的类型上使用switch，以便在不同的编辑器之间针对不同的数据类型进行更改。

例如，假设您的模型如下：

$scope.data = [
  {name: "Joe",   type: 'A', register: 20, birthDate: new Date('2000-08-13')},
  {name: "Jeff",  type: 'A', register: 20, birthDate: new Date('2000-08-13')},
  {name: "Jimmy", type: 'B', register: 20, birthDate: new Date('2000-08-13')},
]

$scope.dataType = {
  name:      {type:'text'},
  type:      {type: 'enum', options: ['A', 'B']},
  register:  {type:'number'},
  birthDate: {type:'date'}
};

您可以像下面这样创建模板：

<tr ng-repeat="item in data">
    <td>{{$index+1}}</td>  
    <td ng-repeat="(keycol, valcol) in dataType">
      <div ng-switch="valcol.type">
        <div ng-switch-when="enum">
          <select
            ng-model="item[keycol]"
            ng-options="option as option for option in valcol.options">
          </select>
        </div>
        <div ng-switch-default>
          <input ng-model="item[keycol]" type="{{valcol.type}}">
        </div>
      </div>
    </td>
</tr>

更好的是，将创建一个编辑器组件/指令来封装行为，为每个列的类型元数据生成一个不同的编辑器，从而使您的生活更轻松，以防您想在其他地方重用它。

例如：

<tr ng-repeat="item in data">
    <td ng-repeat="(keycol, valcol) in dataType">
        <editor ng-model="item[keycol]" type="valcol"></editor>
    </td>
</tr>

下面的代码段使用此答案中描述的解决方案来实现该问题的简单示例。

angular.module('app', [])
  .controller('main', function ($scope) {
    $scope.data = [
      {name: "Joe",   type: 'A', register: 20, birthDate: new Date('2000-08-13')},
      {name: "Jeff",  type: 'A', register: 20, birthDate: new Date('2000-08-13')},
      {name: "Jimmy", type: 'B', register: 20, birthDate: new Date('2000-08-13')},
    ]
    
    $scope.dataType = {
      name:      {type:'text'},
      type:      {type: 'enum', options: ['A', 'B']},
      register:  {type:'number'},
      birthDate: {type:'date'}
    };
  })

* {
  box-sizing: border-box;
}

input,
select {
  width: 100%;
  padding: 1px 10px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
<div ng-app="app" ng-controller="main">
  <table border=1>
    <thead>
      <tr>
        <th>#</th>
        <th ng-repeat="(keycol, valcol) in dataType">
          {{keycol}}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in data">
        <td>{{$index+1}}</td>
        <td ng-repeat="(keycol, valcol) in dataType">
          <div ng-switch="valcol.type">
            <div ng-switch-when="enum">
              <select
                ng-model="item[keycol]"
                ng-options="option as option for option in valcol.options">
              </select>
            </div>
            <div ng-switch-default>
              <input ng-model="item[keycol]" type="{{valcol.type}}">
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <pre>{{ data | json }}</pre>
</div>