时间戳

首页 > 解决方案 > 更改 div 位置运行时间

html - 更改 div 位置运行时间

问题描述

我有一个表单页面，其中包含多个输入字段和表单顶部的下拉字段。
条件是当下拉值更改时，某些字段位置会更改..
示例：
使用下拉值 1 表单将是。 

Name ____  
Address ____  
PAN No ____  
Mobile ____

并带有下拉值 2 形式。 

Name ____  
Mobile ____   
Location ____  
PAN No ____

链接plnkr

标签： htmlangularjs

解决方案

您可以尝试与此类似的方法。

声明array要显示的字段，最初保持该字段为array空，然后change根据value填充array所需字段的下拉菜单，将您绑定UI到该动态array。

就像是 ：-

$scope.inMod = ["Noda1", "Noda2" ];
$scope.stack = []; //initially the stack has no items, empty UI
$scope.selectedNoda = ''; //this makes sure nothing show up
$scope.nodaChange = function(value){
    if(value=='Noda1') {
         $scope.stack = ['Name', 'Address', 'PAN No', 'Mobile'];
    }
    if(value=='Noda2') {
          $scope.stack = ['Name', 'Mobile', 'Location', 'PAN No'];
    }
}

array并迭代UI

<select ng-model="selectedNoda" ng-change="nodaChange(selectedNoda)" ng-options="x for x in inMod">
</select>
<div ng-repeat="item in stack">
  <label>{{item}}:</label>
  <input id="item" type="text" ng-model="item" />
  <br /> 
</div>

推荐阅读