使用ng選項選擇值的AngularJS問題

在AngularJS中使用ng選項時，我遇到了一個奇怪的問題。使用ng選項選擇值的AngularJS問題

我的情況是相當直截了當：

綁定NG-model的值是所選的選項
負荷從後端
綁定加載值「選擇」的值到「選擇」

我從後端加載的對象是一個鍵/值等：

{ 
    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例如選擇的值設置爲「接受」它不會工作。但是，如果選定的值設置爲其他值 - 那麼它工作正常。

而我的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="[email protected]" 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>

任何人誰可以告訴我在這一個？

謝謝！

UPDATE

它看起來像它在Firefox正常工作。但在Chrome和IE中，問題仍然存在。

來源

2016-01-12 mikkelbm

所以，當你查看plunkr例如，在下拉列表中選擇的值設置爲「接受」？ – mikkelbm

我看到一個延遲，但它的工作 – Vamsi

當你說它的工作原理，我不知道我們談論相同。進入頁面時，下拉列表中的選定值是否設置爲「已接受」？沒有與網頁互動... – mikkelbm

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="[email protected]" 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>

來源

2016-01-12 11:50:39

plunkr示例是我的代碼的簡化版本。我無法在$ timeout中設置selectedValue，因爲該邏輯隱藏在服務中。 – mikkelbm

並且如果您嘗試在超時之外運行帶有selectedValue的代碼設置爲'NotAccepted'。一切工作正常...只有當價值是相同的名稱有問題。 – mikkelbm

使用ng選項選擇值的AngularJS問題

回答

相關問題