0

当我尝试在 AngularJS 中同时使用 ng-options 和 ng-switch 来动态更改我正在处理的小部件构建器的页面上放置的内容时，我遇到了一个问题。

我遇到了两个问题：
1. 我似乎无法将 ng-option 默认设置为模型从它显示的 json 设置的值。
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/

4

1 回答 1

1

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

于 2013-07-19T21:44:34.253 回答