Problems when using ng-options and ng-switch together

问题

I have an issue when I am trying to use ng-options and ng-switch together in AngularJS to dynamically change what content is put on the page for a widget builder I am working on.

I have two issues I am experiencing:
1. I can't seem to set ng-option to default to the value being set by the model from the json it displays.
2. When I change the ng-option field the switch below breaks and no longer showes the correct code.

Here is the code:

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

and here is a link to jsFiddle to run it: http://jsfiddle.net/jpeak/dkvwa/

回答1:

The issue is that when you use ng-option and select an item, it selects the whole object, even though just the single key that you specify appears in the selects. So when you select "text", $scope.config.type was being set to {'option':'text'} instead of just "text".

来源：https://stackoverflow.com/questions/17755204/problems-when-using-ng-options-and-ng-switch-together