user1322092 user1322092 - 1 year ago 123
AngularJS Question

Using AngularJS select ng-options with Semantic UI's dropdown

So Semantic UI appears to the latest 'hot' UI framework which I'm impressed with; however, their dropdown isn't an implementation of the HTML 'select' and 'option' tags but instead custom. For my project, I'm using AngularJS which is phenomenal JavaScript MVW framework.

How can I integrate AngularJS select ng-option with Semantic UI's dropdown? I'm not much of a JS pro. Here's the JSfidde:

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

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

<select ng-model="selectedItem" ng-options="c as ( + ' - ' + for c in containers">
<option value="">-- Pick A Container --</option>
<br>ID: {{}}
<br>Name: {{}}
<h3><a href=""> 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="{{}}" class="item" ng-repeat="container in containers">{{}}</div>



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];


Much appreciated!

Answer Source

Your first problem is you need to include semantic.js after jquery.

Second, you can't use ng-options on a div repeater but you can simulate it by using a ng-click


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


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

see this updated fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download