2013-07-19 2 views
0

У меня проблема, когда я пытаюсь использовать ng-options и ng-switch вместе в AngularJS для динамического изменения содержимого, которое размещается на странице для создателя виджета. Я работа над.

Проблемы при использовании ng-options и ng-switch вместе

У меня есть два вопроса, я переживаю: Я не могу установить нг-вариант по умолчанию на значение установлено на модели из JSON он отображает
1..
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/

ответ

1

Проблема в том, что при использовании нг-опции и выберите элемент, он выбирает весь объект, хотя только один ключ, который вы укажете, появляется в выборе. Поэтому, когда вы выберете «текст», $ scope.config.type был установлен в {'option': 'text'} вместо «text».

+0

Это имеет смысл, но как бы вы исправили это так, чтобы он правильно устанавливался? Любая идея по проблеме одна? Спасибо за помощь. – MrCrowly

+0

Это сработало для меня, когда я изменил $ scope.dropDownOptions как простой список вместо объектов: http://jsfiddle.net/wKzZA/3/ – Sharondio

+0

Это прекрасно работает за помощь. – MrCrowly

 Смежные вопросы

  • Нет связанных вопросов^_^