2016-08-16 125 views
-3

我有以下代码:为什么ng-model在select返回字符串而不是JSON?

<select class="form-control" id="existing-phases" ng-model="selectedPhase"> 
    <option disabled selected value>-- select an option --</option> 
    <option ng-repeat="p in existingPhases" value="{{p}}">{{ p.Name }</option> 
</select> 

当我选择我选择一个选项,我希望能得到对应于所选阶段的JSON这应该是这样的:

{"ID":2,"Name":"Outlook"} 

然而,我得到的JSON作为字符串出于某种原因:

"{\"ID\":2,\"Name\":\"Outlook\"}" 

我怎样才能让这个纳克模型返回JSON,而不是一个字符串?

P.S .:我不想在一个方法中进行转换,因为我知道你可以用JSON.Parse()来做到这一点。

更新:

调试打印:

enter image description here

+0

*“但是,出于某种原因,我得到了JSON作为字符串:”* well ... json是一个字符串。如果它不是一个字符串,它不会是json。 –

+0

@KevinB对不起,我不知道如何更好地解释它。这就是为什么我添加了这些例子,所以不会有任何混淆。 –

+0

如何/你在哪里看到'“{\”ID \“:2,\”Name \“:\”Outlook \“}”'? –

回答

-1

我以为我错了,但我没有。如果你使用ng-repeat而不是ng-options,你的ng-model属性被设置为JSON字符串而不是实际的javascript对象。我发现这个问题更好地解释它:Angular UI Select2, why does ng-model get set as JSON string?

所以为了解决我的问题,我不得不从ng-repeat改为ng-options。

2

我设置你的代码plunker,似乎正常工作

https://plnkr.co/edit/Q8Cmknqg8bGBc5hABtF1

<!DOCTYPE html> 
<html> 
    <head> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
    <script> 
     angular.module('app', []) 
     .controller('FooCtrl', function($scope) { 
     $scope.existingPhases = [ 
      {"ID":1,"Name":"a"}, 
      {"ID":2,"Name":"b"}, 
      {"ID":3,"Name":"c"}, 
      {"ID":4,"Name":"d"}, 
      {"ID":5,"Name":"e"}]; 
     $scope.selectedPhase; 
     }); 
    </script> 
    </head> 
    <body ng-app="app"> 
    <div ng-controller="FooCtrl"> 
     <select id="existing-phases" ng-model="selectedPhase"> 
     <option disabled selected value>-- select an option --</option> 
     <option ng-repeat="p in existingPhases" value="{{p}}">{{ p.Name }}</option> 
     </select> 
     {{selectedPhase}} 
    </div> 
    </body> 
</html> 

请检查你的代码我不' t认为这是一个选择指令问题

+0

我发现什么令我感到困惑,因为你的闯入者。我正在打印

{{ phase | json}}
这个阶段的内容,并且管道增加了额外的反斜杠和引号,因此我认为我得到了奇怪的值。 –

+0

我已经提出了一个新的答案,因为我终于知道发生了什么事情。 –

+0

我不明白,根据你问题上的代码,我已经告诉你完全没有问题 –

相关问题