我的要求
- 我应该有两个多选组合框
- 应该可以选择多个值
- 根据从组合框 1 中选择的值，第二个组合框应填充值
为此，我正在使用 AngularJs 和 Multiselect.Js
我能够实现1和2。
对于第 3 点。我发现很难根据组合框 1 中的选定值填充数据
注意：当我选择单个角色时，相关的工人信息会显示在第二个组合框中，但是当我选择多个角色时它不起作用。
我相信这部分代码不适用于多个数组
options="c.WorkerName for c in selectedRoles.workers"
如果您指定了数组索引，那么它将起作用并且只选择该索引的工作人员，但是当在下面的代码中选择多个值时不起作用。
options="c.WorkerName for c in selectedRoles[0].workers"
来自 http://plnkr.co/edit/xWvfWYjaW7TThKZONkv5?p=preview的参考
我的html代码如下：
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.1.x" src="angular.min.js" data-semver="1.1.5"></script>
<script src="app.js"></script>
<script src="multiselect.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Example</h1>
Multi select:
<multiselect class="input-xlarge" multiple="true" header="select roles"
ng-model="selectedRoles"
options="c.roleName for c in roles"
change="selected()"
template-url="multiselect.tmpl.html">
</multiselect>
<div class="well well-small">
{{selectedRoles}}
</div>
<multiselect class="input-xlarge" multiple="true" header="select workers"
ng-model="selectedWorkers"
options="c.WorkerName for c in selectedRoles.workers"
change="selected()"
template-url="multiselect.tmpl.html">
</multiselect>
<div class="well well-small">
{{selectedWorkers}}
</div>
</body>
</html>
以及 Javascript 和 JSON 数据：
Combobox 1：将显示“$scope.roles”中的“roleName”，Combobox 2：应显示选定“rolename”中的工作人员（来自comboxbox1）
var app = angular.module('plunker', ['ui.multiselect']);
app.controller('MainCtrl', function ($scope)
{
$scope.name = 'multiselect';
$scope.roles =
[
{
"roleGuid": "7b48aa01-7dad-4640-abcb-04d8e2666160",
"roleName": "Electric",
"workers": [
{
"WorkerName": "Bond, James",
"WorkerGuid": "dac36324-2f7e-4dca-9e3a-2a9d8ac419ee"
},
{
"WorkerName": "Story, 843",
"WorkerGuid": "85a234a9-3d86-41c2-832c-7a3d40977e88"
},
{
"WorkerName": "Test, SAT124",
"WorkerGuid": "135149fb-b34e-4270-82f6-3488bd59a598"
},
{
"WorkerName": "Test, SAT-18_1",
"WorkerGuid": "15bf6b49-5405-41a5-8473-cfe389bbb1ff"
},
{
"WorkerName": "Verma, Sunil",
"WorkerGuid": "c785f1a1-34e3-4687-9df1-961331b62e0e"
},
{
"WorkerName": "Y, Venkata",
"WorkerGuid": "ae18e61b-340e-4f27-92ac-c701026242c9"
},
{
"WorkerName": "Yadalla, Venkata",
"WorkerGuid": "a9142270-e084-4c38-8e9f-448e647c8841"
}
]
},
{
"roleGuid": "e182d217-7806-4227-905e-ca64c7ac9b76",
"roleName": "General Employee",
"workers": [
{
"WorkerName": "1111, hen",
"WorkerGuid": "93ef8fc9-6fcd-4d26-afca-7ba01968f9ab"
},
{
"WorkerName": "Giri, Ashok",
"WorkerGuid": "2e0c7ba6-3a57-4970-a30c-68fba448492b"
}
]
},
{
"roleGuid": "270ad5e9-370a-43cc-927c-c9b275037447",
"roleName": "Inspection Worker",
"workers": [
{
"WorkerName": "Test, pals3",
"WorkerGuid": "d447cd4a-9f19-463f-880b-9e09e830f9fd"
}
]
}
];
$scope.selectedRoles = [];
$scope.selectedWorkers = [];
});
和多选模板
<div class="dropdown">
<button class="btn" ng-click="toggleSelect()" ng-disabled="disabled" ng-class="{'error': !valid()}">
<span class="pull-left">{{header}}</span>
<span class="caret pull-right"></span>
</button>
<ul class="dropdown-menu">
<li>
<input class="input-block-level" type="text" ng-model="searchText.label" autofocus="autofocus" placeholder="Filter" />
</li>
<li ng-show="multiple">
<button class="btn-link btn-small" ng-click="checkAll()"><i class="icon-ok"></i> Check all</button>
<button class="btn-link btn-small" ng-click="uncheckAll()"><i class="icon-remove"></i> Uncheck all</button>
</li>
<li ng-repeat="i in items | filter:searchText">
<a ng-click="select(i); focus()">
<i ng-class="{'icon-ok': i.checked, 'icon-empty': !i.checked}"></i>{{i.label}}</a>
</li>
</ul>
</div>