AngularJS问题与ng选项所选值有关

在AngularJS中使用ng选项时，我遇到了一个奇怪的问题。

我的设想非常直接：

将值与ng模型绑定为选定选项
从后端加载"select"的值
将加载的值绑定到"select"

从后端加载的对象是一个密钥/值，如：

{
   Value: "my_value",
   Name: "my_name"
}

一切都很好直到名称和值相同然后angular将不再正确绑定选定的值。

我创建了这个plunker：https://plnkr.co/edit/tUBXIpMTBAHK2Xh8aDu6?p=preview证明问题。

我的控制器：

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $timeout) {
  $scope.name = 'World';
  $timeout(function(){
    $scope.values = [
        { Name: "Accepted", Value: "Accepted" },
        { Name: "Not accepted", Value: "NotAccepted" },
        { Name: "Not at all accepted", Value: "NotAtAllAccepted" }
      ];
  }, 2000);
  $scope.selectedValue = "Accepted";
  //$scope.selectedValue = "NotAccepted";
  //$scope.selectedValue = "NotAtAllAccepted";
});

如果plunker示例中的选定值设置为"Accepted"，则该值将不起作用。但是，如果选定的值被设置为其他一些值，那么它就可以正常工作。

还有我的HTML:

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <p>Hello {{selectedValue}}!</p>
    <select ng-model="selectedValue" ng-options="orderStatus.Value as orderStatus.Name for orderStatus in values"></select>
  </body>
</html>

有谁能对我有所启发吗？

谢谢！

更新

看起来它在Firefox中运行良好。但在Chrome和IE中，问题仍然存在。

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $timeout) {
  $scope.name = 'World';
  
  $timeout(function(){
    $scope.values = [
        { 'Name': "Accepted", 'Value': "Accepted" },
        { 'Name': "Not accepted", 'Value': "NotAccepted" },
        {'Name': "Not at all accepted", 'Value': "NotAtAllAccepted" }
      ];
    $scope.selectedValue = "Accepted";
  }, 2000);
  
  
  //$scope.selectedValue = "NotAccepted";
  //$scope.selectedValue = "NotAtAllAccepted";
});

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <p>Hello {{selectedValue}}!</p>
    
    <select ng-model="selectedValue" ng-options="orderStatus.Name as orderStatus.Value for orderStatus in values"></select>
    
  </body>
</html>

相关内容

最新更新

热门标签：