[英]Angularjs: convert standart select to ui-select
I have this select in angularjs that works perfect with my Web Service, but it have so many data, so I need a select searchable. 我在angularjs中选择了该选择项,该选择项可以与我的Web服务完美配合,但是它具有大量数据,因此我需要一个可搜索的选择项。 I found the ui-select, and I am trying to convert this code (HTML and app.js) to ui-select: 我找到了ui-select,并且尝试将以下代码(HTML和app.js)转换为ui-select:
HTML: HTML:
<select class="form-control" id="fabricante" data-ng-model="equipamento.RazaoSocial" ng-disabled="viewMode">
<option ng-repeat="fabricante in fabricantes" value="{{fabricante.RazaoSocial}}">{{fabricante.RazaoSocial}}</option></select>
App.js App.js
// select fabricantes
$scope.fabricantes = [];
$scope.fabricante;// = null;
$scope.fabricantes = gettbfabricante();
gettbfabricante();
function gettbfabricante() {
EmpApi.gettbfabricante().success(function (response) {
$scope.fabricantes = response;
})
.error(function (error) {
$scope.status = 'Não foi possível carregar os dados: ' + error.message;
$window.alert($scope.status);
});
};
Service.js Service.js
//get tbfabricante
EmpApi.gettbfabricante = function () {
return $http.get(urlBase + '/tbfabricante')
}
Can anyone help please? 有人可以帮忙吗? I tried to use this Plunker example . 我尝试使用这个Plunker示例 。
First you need to install ui-select using npm or bower for npm run npm install ui-select
and for bower run bower install angular-ui-select
首先,您需要使用npm或bower安装ui-select来进行npm run npm install ui-select
并为bower运行bower install angular-ui-select
after that in your html write : 之后,在您的html中写:
<ui-select ng-model="equipamento.RazaoSocial" ng-disabled ="viewMode">
<ui-select-match placeholder="Pick one...">{{$select.selected}}</ui-select-match>
<ui-select-choices repeat="data in fabricantes | filter: $select.search track by data.RazaoSocial">
{{fabricante.RazaoSocial}}
</ui-select-choices>
</ui-select>'
Hope this will help you . 希望这会帮助你 。 If you want to learn or add more components in your ui-select refer this url Ui-select documentation 如果您想学习或在ui-select中添加更多组件,请参考此URL ui -select文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.