import {ElementRef,Component,OnInit,EventEmitter} from "angular2/core";
import {DropdownValue} from "./dropdown-value";

declare var jQuery: any;

@Component({
selector: 'my-dropdown',inputs: ['selectedItem','items','label'],outputs: ['selectedItemChange'],template: `
<div>        
  <label>{{label}}</label>        
    <select[ngModel]="selectedItem.value" (ngModelChange)="onChange($event)">
      <!--<option value="" selected>Please Select</option>-->
      <option *ngFor="#item of items" [value]="item.value">{{item.label}}</option>
    </select>        
</div>`
})

export class MyDropdownComponent implements OnInit {

items: DropdownValue[];
selectedItem: DropdownValue;
selectedItemChange: EventEmitter<any> = new EventEmitter();

constructor(private elementRef: ElementRef) {
}

ngOnInit(): any {
    this.items.unshift(new DropdownValue('','Please Select'));
    this.selectedItem = this.selectedItem || this.items[0];
    //jQuery(this.elementRef.nativeElement).find('select').dropdown();
}

onChange(newValue) {
    let selectedItem = this.items.find(item => item.value == newValue);
    this.selectedItemChange.emit(selectedItem);
}

}

这实际上工作得很好(没有Semantic UI JS样式),问题是,只要我取消注释//jQuery(this.elementRef.nativeElement)行.find(‘select’).dropdown(); “请选择”不再可见,并且不显示初始选择.

dropdown()重置所选值.所以你必须在下拉()后重新选择所需的值：

ngAfterViewInit(){
  jQuery(this.elementRef.nativeElement).find('select').dropdown({allowTab:false});
  jQuery(this.elementRef.nativeElement).find('select').dropdown("set selected",this.selectedItem.value);
}

见plunkr

<my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page> 

app.directive(''myDirective'',function(){
return {
//restrict: 默认为A（属性，默认值）<div my-directive=''''></div> E（元素）C（类名）M（注释）
//这里考虑到浏览器的兼容性通常我们用所有浏览器都认识的A类型
restrict: ''A'',
//优先级设置,默认是0,较大的优先调用
priority: 0,
//这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。
terminal: false,
//字符串或函数: 字符串<a></a>(指令内容)
//注：必须存在一个根DOM元素
//一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符串 
//function(tElement, tAttrs) { ... }
template: '''', 
//从指定的url地址加载模板
templateUrl: '''',
//如果设置了这个参数，值必须为true
replace: false,
//指定指令的作用域
scope:'''',
//
transclude:'''',
//string
//function(scope, element, attrs, transclude, otherInjectables) { ... }
controller:'''',
//
controllerAs: '''',
//
require: '''',
//以编程的方式操作DOM，包括添加监听器等
link: function postLink(scope, iElement, iAttrs) {},
//
compile: // 返回一个对象或连接函数，如下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { },
post: function(scope, iElement, iAttrs, controller) { }
}
// 或者
return function postLink() { }
};
};
}) 

<style type="text/css">
.con {
margin: 0 auto;
width: 600px;
margin-top: 100px;
}
.panel {
width: 580px;
}
.panel-heading {
cursor: pointer;
}
</style>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" />
<divng-app="myApp" ng-controller="myCtrl">
<my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
<script type="text/javascript">
var app = angular.module(''myApp'', []);
app.directive(''myPage'', function () {
return {
restrict: ''EA'',
replace: true,
transclude: true, //是否将元素内容转移到模版中
scope: {
title: "=pageTitle"
},
template: [
''<div>'',
''<divng-click="toggle();">'',
''<h3>{{title}}</h3>'',
''</div>'',
''<divng-show="showMe" ng-transclude></div>'',
''</div>''
].join(""),
link: function (scope, element, attrs) {
scope.showMe = false;
scope.$parent.addExpander(scope); //保存所有菜单
scope.toggle = function toggle() {
scope.showMe = !scope.showMe; //隐藏显示
scope.$parent.goToExpander(scope);
}
}
};
})
app.controller(''myCtrl'', function ($scope) {
$scope.expanders = [{
title: ''AngularJS'',

text: ''AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。''


}, {
title: ''jQuery'',
text: ''JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。''
}, {
title: ''Bootstrap'',
text: ''Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。''
}];
var expanders = []; //记录所有菜单
$scope.addExpander = function (expander) {
expanders.push(expander);
};
$scope.goToExpander = function (selectedExpander) {
expanders.forEach(function (item, index) {
if (item != selectedExpander) { //隐藏非当前选项卡
item.showMe = false;
}
})
}
});
</script>