Angularjs 同时使用ng选项和ng开关时出现的问题

当我试图在AngularJS中同时使用ng选项和ng开关来动态更改我正在使用的小部件生成器页面上的内容时，我遇到了一个问题。

我遇到了两个问题：
1.我似乎无法将ng选项设置为默认值，即模型从显示的json中设置的值。
2.当我更改ng选项字段时，下面的开关断开，不再显示正确的代码

代码如下：

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

类型：

来源/内容：



{{config.content}}
函数SimpleController（$scope）{
$scope.dropdownpoptions=[
{“选项”：“图像”}，
{“选项”：“文本”}
];
$scope.config={
“类型”：“文本”，
“内容”：“你好”
};
}

---

这里有一个指向jsFiddle的链接来运行它：

问题是，当您使用ng选项并选择一个项目时，它会选择整个对象，即使您指定的单个键出现在selects中。因此，当您选择“text”时，$scope.config.type被设置为{'option'：'text'}，而不仅仅是“text”。

这是有道理的，但是您如何解决这个问题，使其正确设置？对这个问题有什么想法吗？谢谢你的帮助。当我把$scope.dropdownpoptions改为简单的列表而不是对象时，它对我起到了作用：更好的答案是，它显示了如何拆分键值对。这个问题指的是ng repeat，这是一个巧妙的技巧，但它并没有解决您在使用ng选项选择整个对象而不仅仅是值时遇到的问题。如果您想要/需要为ng选项保留整个对象，还可以在ng开关上设置“config.type.option”，如下所示：