0

所以我开始需要一个简单的自动填充表单字段。当用户选择下拉菜单项时，会自动填充另一个字段。现在我需要自动填充另一个字段，这次是另一个选择列表，其中每个先前的选择有两个选择。

这是它的工作原理：

选择的源系统 - 预先填充了值的其他源系统。我使用这种方法做到了这一点：

HTML：

<form name="intakeform">
         <div class="form-group">
            <label for="sourceSystem">Source System</label>
           <select class="form-control" ng-model="system" ng-options="s.name for s in systems" >
                <option value="">Select Source System</option>
           </select>   
        </div>
       <div class="form-group">
            <label for="otherSystem">Other Source System Indentifiers</label>
            <input type="text" ng-model="system.ossi" class="form-control" placeholder="Other Source System Indentifiers">
        </div>
</form>

app.js 控制器：

routerApp.controller('IntakeController', function($scope, $timeout){
 $scope.systems = [{
    name: 'Cosmos',
    ossi: 'Cosmos DIV',
  },
  {
    name: 'UNET',
    ossi: 'ADJ and ENG',
  },
];
});

这允许了一个很好的 1:1 关系。如果我选择一个系统，则会自动选择另一个系统。现在我必须有另一个基于源系统选择的选择列表。这意味着我将为每个源系统创建一个包含两个项目的选择列表，从而形成 2:1 的关系。

那么我将如何在 Angular 中做到这一点？我已经尝试过 ng-show、ng-hide，但我不确定在我当前的设置中是否可以使用 ng-options 来做到这一点。这是静态列表，如果有帮助就不会是动态的。在另一个列表中选择一个项目后显示一个列表的示例有很多，但我似乎找不到一个示例，其中有人在依赖于初始选择的下拉列表中有多个项目。

任何帮助表示赞赏

磷

4

2 回答 2

1

一种方法是在更改时创建函数触发器（ng-change="populateSecond($index)"），然后，在控制器中，您可以拥有一个数组数组，其中包含第二次选择的数据：

$scope.data = [
     [{one: "opOne"}, {two: "opTwo"}],
     [{three: "opThree"}, {four: "opFour"}].
     ... 
];

如果此数据根据第一个元素中的选项进行排序，则传递索引帮助器可以帮助您在 populateSencond 函数（）中将此新数据分配给模型：

 $scope.populateSecond = function(index) {
     $scope.system.osi = $scope.data[index];
 };
于 2015-06-09T20:54:13.923 回答
0

我终于弄明白了。在我使用 jQuery 链接插件（http://www.appelsiini.net/projects/chained）之前，我发现有一个等效的角度，并弄清楚我是否在我的控制器中这样做：

routerApp.controller('IntakeController', function($scope, $timeout){
 $scope.systems = [{
    name: 'Cosmos',
    ossi: 'Cosmos DIV',

    "type": "cosmos",
       "options":[
     {"value": "physician"},
     {"value": "hospital"}
     ],     
  },
  {
    name: 'UNET',
    ossi: 'ADJ and ENG',

      "type": "unet",
       "options":[
     {"value": "member"},
     {"value": "provider"}
     ],     
  },
];

});

我可以获得相同的功能 - 我能够做到。

于 2015-06-10T14:31:04.457 回答