如何在使用 angularjs 的表上使用多 select 下拉菜单？

Question

这是我的 select 下拉列表

<select  ng-model="searchtxt">
<option value="">Select Institute</option>
<option ng-repeat="user in products | unique : 'Institute'" value="{{user.Institute}}">{{user.Institute}}</option></select>

这是我的桌子

<table>
<thead>
<th>Institute<th>
</thead>
<tbody>
<tr ng-repeat="user in products>
<td>{{user.Institute}}</td>
</tr>
</tbody>
</table>
</table>

这是我的 json

$scope.products = [
{"Institute": "Academy for Coaching Excellence"}
{"Institute": "Sample for training Excellence"}
{"Institute": "Demo for education Excellence"}
{"Institute": "Academy for best Excellence"}
];

我试过以下

$scope.selectedRows = [];
$scope.select = function(item) {
item.selected ? item.selected = false : item.selected = true;
}
$scope.getAllSelectedRows = function() {
var selectedRows = $filter("filter")($scope.users, {
selected: true
}, true);    
$scope.selectedRows = selectedRows;
}

任何人都可以帮助我在我的情况下获得最佳解决方案吗？

Answer 1

多重 select 是添加了multiple属性的常规 select。 在 angular 中，无论 select 都将绑定到ng-model变量。

我不确定此示例是否回答了您的问题，但它显示了如何从多选菜单访问数据

 angular.module('selectExample', []).controller('ExampleController', ['$scope', function($scope) { $scope.products = [{ "Institute": "Academy for Coaching Excellence" }, { "Institute": "Sample for training Excellence" }, { "Institute": "Demo for education Excellence" }, { "Institute": "Academy for best Excellence" }]; $scope.searchtxt = []; }]);

 .selected { color: green; font-style: italic; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script> <div ng-app="selectExample"> <div ng-controller="ExampleController"> <div>Select Institute</div> <select multiple ng-model="searchtxt"> <option ng-repeat="user in products" value="{{user.Institute}}">{{user.Institute}}</option> </select> <hr> <table> <thead> <th>Institute <th> </thead> <tbody> <tr ng-repeat="user in products"> <td ng-class="{'selected':searchtxt.indexOf(user.Institute)>-1}">{{user.Institute}}</td> </tr> </tbody> </table> <hr> $scope.searchtxt: {{searchtxt}} </div> </div>