如何使用angularjs在表格上使用多选下拉菜单

Question

这是我选择的下拉

<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

多选是添加了multiple属性的常规选择。在angular中，无论您选择什么，都将绑定到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>