我想使用select with search属性这个我的HTML:
<div style="width:25em" >
<label> Hotel :</label>
<select ng-options="u for u in registrationCards | orderBy : 'hotelName' | unique:'hotelName'" ng-model="selectedDist" ng-change="selectAction(selectedDist)" >
<option value=""></option>
</select>
</div >
<script>
$(document).ready(function() {
$('select').chosen( { width: '100%' } );
});
</script>
它没有采用ng-option元素的问题,我不知道为什么: 这是库js:
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>
<script src="https://rawgit.com/leocaseiro/angular-chosen/master/dist/angular-chosen.min.js"></script>
如何解决这个问题?提前致谢
this is my angular.module:
angular.module('etWeb.RegistrationCard',[ 'nvd3','base64']).service('RegistrationCardService', RegistrationCardService).controller('RegistrationCardController', RegistrationCardController).filter('startsWithFirstName', function() {});
这是我的controler.js:
function RegistrationCardController($scope, $http,$state,$base64, RegistrationCardService,HotelsService) {
$scope.registrationCards = [];
function loadRegistrationCard() {
RegistrationCardService.fetchAllRegistrationCard().then(function(d) {
$scope.registrationCards = d;
}, function(errResponse) {
console.error('Error while fetching Registration-Card');
});
}
答案 0 :(得分:0)
根据您更新的代码,我可以找到两个问题:
1- unique
过滤器在angularjs中不可用。它位于angular-ui
。如果您想要使用它,则必须在项目中包含angular-ui
。并将'ui.filters'
添加为角度模块的依赖项:
angular.module('etWeb.RegistrationCard', ['nvd3','base64', 'ui', 'ui.filters'])
或者您可以将代码复制粘贴到您的应用程序中: 唯一过滤器source code link
2-第二个问题是ng-options的作用是label for value in array
,所以你的ng-option表达式必须是:
// With unique filter
ng-options="u.hotelName for u in registrationCards | orderBy : 'hotelName' | unique:'hotelName'"
或
// Without unique filter
ng-options="u.hotelName for u in registrationCards | orderBy : 'hotelName'"