0

AngularJS で zurb-foundation を使用しています。

次のコードがあります。 

<div class="row full" ng-controller="Movies">
    <div class="large-3 columns">    
        <form class="custom">
            <select id="customDropdown" class="small button dropdown secondary radius">
                <option DISABLED SELECTED>Movie selection</option>
                <option ng-repeat="movie in movie_list.movies">{{movie.name}}</option>
            </select>
        </form>
    </div>
</div>

function Movies($scope) {
    $scope.movie_list = { movies : [{name:'Movie1'}, {name:'Movie2'}]}; 
}

基盤に必要なため、jQuery プラグインを含めました。jQuery が含まれていない場合、コードは正常に動作しますが、jQuery を含めるとドロップボックスに何も表示されず、そこにあるはずのすべてのテキストがページの下部に表示されます。

4

1 に答える 1

0

私の Plnkr を見てください:- http://plnkr.co/edit/9w2jTg?p=preview

jQuery と AngularJS で Foundation 選択ボックスを使用していますが、正常に動作しています。スクリプト参照の順序に関係している可能性があります。コードを見ずに言うのは難しいです。
また、最初の選択オプションが無効になっていて空の値がない場合、選択ボックスが空白になり、それを開く唯一の方法は小さな矢印をクリックすることであることに気付きました。

これは正しく動作しません:

<option disabled>Please select...</option>

正常に動作します：

<option value="" disabled>Please select...</option>
于 2013-03-23T13:25:16.167 に答える