Question

当我尝试在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/

Answer 1

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

将ng-options和ng-switch一起使用时出现问题

1 个答案: