AngularJS: Показать соответствующие элементы формы в зависимости от типа модели

Question

У меня есть угловая модель, которая имеет ConfigValues. По сути св Dictionary передается из C#, который выглядит немного как:

{ 
    Name: "Config Name", 
    Value "True", 
    Type: 0 // boolean 
} 

Некоторые булевы, некоторые из них Интса и т.д. То, что я хотел бы, чтобы разумно показать checkbox (или, возможно, select), когда я сталкиваюсь тип bool, а затем показать нормальный input, когда я вижу другой тип.

Как я могу это сделать?

<table> 
    <tr ng-repeat="(key, val) in module.ConfigValues"> 
     <td>{{key}}</td> 
     <td><input type="text" ng-model="val.Value" ng-disabled="module.saving" /></td> 
    </tr> 
</table> 

Answer 1

Попробуйте с ngIf:

<table> 
    <tr ng-repeat="(key, val) in module.ConfigValues"> 
     <td>{{key}}</td> 
     <td> 
      <input type="text" ng-model="val.Value" ng-disabled="module.saving" ng-if="val.Type !== 0" /> 
      <input type="checkbox" ng-model="val.Value" ng-disabled="module.saving" ng-if="val.Type === 0" /> 
     </td> 
    </tr> 
</table> 

Если вы будете иметь больше типов, может быть, вы можете попробовать с ngSwitch:

<table> 
    <tr ng-repeat="(key, val) in module.ConfigValues"> 
     <td>{{key}}</td> 
     <td> 
      <span ng-switch="val.Type"> 
       <input type="checkbox" ng-model="val.Value" ng-disabled="module.saving" ng-switch-when="0" /> 
       <input type="text" ng-model="val.Value" ng-disabled="module.saving" ng-switch-default="0" /> 
      </span> 
     </td> 
    </tr> 
</table>