select selected不适用于AngularJs

时间:2018-01-26 15:40:35

标签: javascript html angularjs select

我想使用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');
        });
    }

1 个答案:

答案 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'"