所以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();
非常感激！
解决方法
你的第一个问题是你需要在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;
};
