如何从 ui-select 多个中获取 selected 选项
How to get the selected option from ui-select multiple
我在弄清楚如何从 ui-select
获取多 select 形式的 selected 值时遇到了一些问题。
我做了一个片段来告诉你我想做什么。在我的 html 中,我制作了一个带有 ng-change-event 回调的 ui-select:ng-change="onDatasetChanged(whatShouldBehere?)"
。 When the option is selected, I want to print the selected model only inside the onDatasetChanged()
-method in my controller.
angular.module('myApp',['ui.select']).controller('MyController', function ($scope) {
$scope.myUiSelect={model:{}}; // encapsulate your model inside an object.
$scope.availableData=["a","b","c"]; //some random options
$scope.onDatasetChanged = function(selectedValue){
console.log("selectedValue",selectedValue);
}
});
<link href="https://rawgit.com/angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-select/master/dist/select.js"></script>
<body ng-app="myApp" ng-controller="MyController">
<ui-select multiple ng-model="myUiSelect.model" close-on-select="false" title="Choose a dataset" ng-change="onDatasetChanged(whatShouldBehere?)">
<ui-select-match placeholder="Select something">{{$item.label}}</ui-select-match>
<ui-select-choices repeat="data in availableData | filter:$select.search">
{{data}}
</ui-select-choices>
</ui-select>
</body>
在对 ui-select
-directive 的存储库页面进行一些研究之后
我认为您可以像这样使用 on-select
事件绑定:
on-select="onSelect($item, $model)"
。查看更新后的代码段:
angular.module('myApp',['ui.select']).controller('MyController', function ($scope) {
$scope.myUiSelect={model:{}}; // encapsulate your model inside an object.
$scope.availableData=["a","b","c"]; //some random options
$scope.onSelect = function(item,model){
console.log("selectedItem",item);
}
});
<link href="https://rawgit.com/angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-select/master/dist/select.js"></script>
<body ng-app="myApp" ng-controller="MyController">
<ui-select multiple ng-model="myUiSelect.model" close-on-select="false" title="Choose a dataset" on-select="onSelect($item, $model)">
<ui-select-match placeholder="Select something">{{$item.label}}</ui-select-match>
<ui-select-choices repeat="data in availableData | filter:$select.search">
{{data}}
</ui-select-choices>
</ui-select>
</body>
我在弄清楚如何从 ui-select
获取多 select 形式的 selected 值时遇到了一些问题。
我做了一个片段来告诉你我想做什么。在我的 html 中,我制作了一个带有 ng-change-event 回调的 ui-select:ng-change="onDatasetChanged(whatShouldBehere?)"
。 When the option is selected, I want to print the selected model only inside the onDatasetChanged()
-method in my controller.
angular.module('myApp',['ui.select']).controller('MyController', function ($scope) {
$scope.myUiSelect={model:{}}; // encapsulate your model inside an object.
$scope.availableData=["a","b","c"]; //some random options
$scope.onDatasetChanged = function(selectedValue){
console.log("selectedValue",selectedValue);
}
});
<link href="https://rawgit.com/angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-select/master/dist/select.js"></script>
<body ng-app="myApp" ng-controller="MyController">
<ui-select multiple ng-model="myUiSelect.model" close-on-select="false" title="Choose a dataset" ng-change="onDatasetChanged(whatShouldBehere?)">
<ui-select-match placeholder="Select something">{{$item.label}}</ui-select-match>
<ui-select-choices repeat="data in availableData | filter:$select.search">
{{data}}
</ui-select-choices>
</ui-select>
</body>
在对 ui-select
-directive 的存储库页面进行一些研究之后
我认为您可以像这样使用 on-select
事件绑定:
on-select="onSelect($item, $model)"
。查看更新后的代码段:
angular.module('myApp',['ui.select']).controller('MyController', function ($scope) {
$scope.myUiSelect={model:{}}; // encapsulate your model inside an object.
$scope.availableData=["a","b","c"]; //some random options
$scope.onSelect = function(item,model){
console.log("selectedItem",item);
}
});
<link href="https://rawgit.com/angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-select/master/dist/select.js"></script>
<body ng-app="myApp" ng-controller="MyController">
<ui-select multiple ng-model="myUiSelect.model" close-on-select="false" title="Choose a dataset" on-select="onSelect($item, $model)">
<ui-select-match placeholder="Select something">{{$item.label}}</ui-select-match>
<ui-select-choices repeat="data in availableData | filter:$select.search">
{{data}}
</ui-select-choices>
</ui-select>
</body>