个人中心
gpt4 book ai didi

ng-options 选定值的 AngularJS 问题

转载 作者：行者123 更新时间：2023-12-03 08:20:25 25 4
gpt4 key购买 nike

在 AngularJS 中使用 ng-options 时我遇到了一个奇怪的问题。

我的场景非常简单:

  1. 用ng-model绑定(bind)一个值作为选中的选项
  2. 从后端加载“select”的值
  3. 将加载的值绑定(bind)到'select'

我从后端加载的对象是一个键/值，如:

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

一切正常... 直到名称和值相同。然后 Angular 将不再正确绑定(bind)所选值。

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

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

如果 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="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>

关于ng-options 选定值的 AngularJS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34742678/

25 4 0
文章推荐： npm - Gulp 错误 : gulp. hasTask 不是函数
文章推荐： nhibernate - 为什么NHibernate AutoFlush检查如此昂贵？
文章推荐： javascript - Angular js - isImage() - 通过 url 检查它是否是图像
文章推荐： angularjs - 使用 Angular 和 UI-Router 更改父变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com