AngularJS problems with ng-options selected value

I'm facing a strange problem when using ng-options with AngularJS.

My scenario is pretty straight forward:

Bind a value with ng-model to be the selected option
Load the values of the 'select' from a backend
Bind the loaded values to the 'select'

My objects loaded from the backend is a key/value like:

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

And everything works fine... Until Name and Value are the same. Then angular won't bind the selected value correct anymore.

I have created this plunker: https://plnkr.co/edit/tUBXIpMTBAHK2Xh8aDu6?p=preview To demonstrate the problem.

My controller:

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";
});

If the selected value in the plunker example is set to 'Accepted' it will not work. But if the selected value is set to some of the other values - then it works fine.

And my 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>

Anyone who can enlighten me on this one?

Thanks!

UPDATE

It looks like it works fine in Firefox. But in Chrome and IE the problem still occurres.

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>

来源：https://stackoverflow.com/questions/34742678/angularjs-problems-with-ng-options-selected-value

标签

angularjs

ng-options