采用NG-选项和NG-开关一起时出现的问题 [英] Problems when using ng-options and ng-switch together

问题描述

我有，当我试图用NG-选项和NG-开关一起AngularJS动态改变什么内容放在页面上的一个小部件建设者我工作的问题。

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.

我有两个问题，我遇到：

1.我似乎无法设置NG-选项默认值被从它显示的JSON模式设置。

2.当我改变NG选项字段下方断开关，不再showes正确的code。

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.

下面是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>

和这里是一个链接的jsfiddle运行它： http://jsfiddle.net/jpeak/dkvwa/

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

推荐答案

的问题是，当你使用NG-选项，并选择一个项目，它选择整个对象，即使只是你指定单个键出现在选择。所以，当你选择文本，$ scope.config.type被设定为{'选项'：'文本'}。而不是仅仅文

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

这篇关于采用NG-选项和NG-开关一起时出现的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！