AngularJS で ng-options と ng-switch を一緒に使用して、作業中のウィジェット ビルダーのページに配置されるコンテンツを動的に変更しようとすると、問題が発生します。
私が経験している 2 つの問題が
あります。
2. ng-option フィールドを変更すると、下のスイッチが壊れて正しいコードが表示されなくなります。
コードは次のとおりです。
<div ng-app="">
<div data-ng-controller="SimpleController">
Type: <select ng-model="config.type" ng-options="inputTypes.option for inputTypes in dropDownOptions"></select><br/>
Source/Content: <input type="text" ng-model="config.content" /><br/>
<br/>
<div ng-switch on="config.type">
<img ng-switch-when="image" ng-src="{{config.content}}">
<div ng-switch-when="text" >{{config.content}}</div>
</div>
</div>
</div>
<script>
function SimpleController($scope) {
$scope.dropDownOptions = [
{"option": "image"},
{"option": "text"}
];
$scope.config = {
"type":"text",
"content":"Hello"
};
}
</script>
そして、これを実行するための jsFiddle へのリンクがあります: http://jsfiddle.net/jpeak/dkvwa/