Question

所以Semantic UI出现在最新的“热门”UI框架中，我对此印象深刻;但是，它们的下拉列表不是HTML“select”和“option”标签的实现，而是自定义。对于我的项目，我使用的是AngularJS，它是非凡的JavaScript MVW框架。

如何将AngularJS select ng-option与Semantic UI's dropdown合并？我不是一个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();

非常感谢！

Answer 1

你的小提琴有些不对劲。第一个是在jQuery之前加载了语义ui JavaScript。这取决于jQuery所以必须首先加载jQuery。（另外，建议在AngularJS之前加载jQuery。）

第二件事是在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);
        }
    };
});

Answer 2

你的第一个问题是你需要在 jquery之后加入semantic.js 。

其次，您不能在div转发器上使用ng-options，但可以使用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; };

请参阅this updated fiddle

使用AngularJS选择ng-options和Semantic UI下拉列表

2 个答案: