4

したがって、セマンティック UI は、私が感銘を受けた最新の「ホットな」UI フレームワークに表示されます。ただし、ドロップダウンは HTML の「select」および「option」タグの実装ではなく、カスタムです。私のプロジェクトでは、驚異的な JavaScript MVW フレームワークである AngularJS を使用しています。

AngularJS select ng-optionをセマンティック UI のドロップダウンと統合するにはどうすればよいですか? 私はJSのプロではありません。これがJSfiddeです：http://jsfiddle.net/fMUy3/

    <!doctype html>
<html ng-app="App">

    <body ng-controller="MainCtrl">
            <h3>Option 1 (standard)</h3>

        <select ng-model="selectedItem" ng-options="c as (c.id + ' - ' + c.name) for c in containers">
            <option value="">-- Pick A Container --</option>
        </select>
        <br>ID: {{selectedItem.id}}
        <br>Name: {{selectedItem.name}}
         <h3><a href="http://semantic-ui.com/modules/dropdown.html"> Semantic UI Dropdown</a></h3>

        <div class="ui selection dropdown ">
            <input name="id" type="hidden" value="0">
            <div class="text">-- Pick A Container --</div>  <i class="dropdown icon"></i>   
            <div class="menu transition hidden">
                <div class="item active">-- Pick A Container --</div>
                <div data-value="{{container.id}}" class="item" ng-repeat="container in containers">{{container.name}}</div>
            </div>
    </body>

</html>

JavaScript:

var app = angular.module('App', []);

app.controller('MainCtrl', function($scope) {
  $scope.containers = [
  {id: 1, name: 'Box1'},
  {id: 2, name: 'Box2'},
  {id: 3, name: 'Box3'}];

  //$scope.selectedItem = $scope.containers[0];
});

$('.ui.dropdown').dropdown();

とても有難い！

4

2 に答える 2

7

あなたのフィドルにはいくつか問題がありました。1 つ目は、jQuery の前にセマンティック UI JavaScript がロードされていたことです。jQuery に依存するため、最初に jQuery をロードする必要があります。(また、AngularJS の前に jQuery をロードすることをお勧めします。)

2 つ目は、AngularJS がオプションを作成するリピーターを展開する前に、セマンティック ドロップダウン関数が呼び出されていたことです。これは、セマンティックがドロップダウンを行ったときにオプションが存在しなかったことを意味します。 簡単な解決策として、次の処理ループで発生するタイムアウトを作成しました。AngularJS が処理を完了した後。セマンティックドロップダウンが機能するようになったことがわかります

これは、物事のタイミングをデモするための単純な概念実証であり、使用すべきではありません。
http://jsfiddle.net/fMUy3/1/

$timeout(function(){
    $('.ui.dropdown').dropdown();
},0)

これを処理する方法は、タイムアウトを使用する必要がなく、コントローラーで各ドロップダウンを指定する必要がないように、タイミングを処理するディレクティブを使用することです。ディレクティブを使用した例を次に示します (すべてのケースを処理します)。

http://jsfiddle.net/fMUy3/7/

app.directive('dropdown', function ($timeout) {
    return {
        restrict: "C",
        link: function (scope, elm, attr) {
            $timeout(function () {
                $(elm).dropdown().dropdown('setting', {
                    onChange: function (value) {
                        scope.$parent[attr.ngModel] = value;
                        scope.$parent.$apply();
                    }
                });
            }, 0);
        }
    };
});
于 2013-12-13T19:37:17.983 に答える
1

最初の問題は、 jquery の後に Semantic.js を含める必要があることです。

ng-options次に、 div リピーターでは使用できませんが、ng-click

HTML

 <div data-value="{{container.id}}" class="item" ng-repeat="container in containers" ng-click="select(container)">
     {{container.name}}
 </div>

JS

$scope.select = function(container) {
    $scope.selectedItem = container;        
};

この更新されたフィドルを参照してください

于 2013-12-13T19:53:15.350 に答える