Question

所以为了保持简单，我试图用我从ajax调用获得的新项目列表来更新我的选择列表。列表中有项目。我将模型设置为新列表并执行$ scope。$ apply（）。这在firefox中很有用，但在IE中却不行。我究竟做错了什么？我缺少一些IE9的东西吗？（我一直在寻找几个小时，准备放弃）。感谢我能得到的所有帮助。

HTML：

<select 
  ng-model="SelectedParameter" 
  ng-options="Parameter.Name for Parameter in AllParameters">
</select>

JS：

$.getJSON("/Cont/GetList", {id: id}, 
  function (result) {
    var allParameters = result.Data.AllParameters;
    $scope.AllParameters = allParameters;
    $scope.$apply();  
  }
);

Answer 1

你可以通过“Angular方式”做得更好。不需要JQuery！事实上，如果你发现自己以“JQuery方式”做事，那你可能做错了。 Mark Rajcok had a really good question (and answer) about this same thing on StackOverflow a while ago：

<强> app.js

//declare your application module.
var app = angular.module('myApp', []);

//declare a controller
app.controller('MainCtrl', function($scope, $http) {
   //function to update the list
   $scope.updateList = function () {
      $http.get('/Cont/GetList', function(data) {
         $scope.allParameters = data;
      });
   };

   //initial load
   $scope.updateList();
});

<强>的index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <script src="angular.js"></script>
   <script src="app.js"></script>
</head>
<body>
  <div ng-controller="MainCtrl">
    <button ng-click="updateList()">Update</button>
    <ul>
       <li ng-repeat="parameter in allParameters">{{parameter | json}}</li>
    </ul>

    <!-- EDIT: Because you requested a select.
         or if you wanted to do a select list 
         assuming every object in your array had a "name" property
         you wanted to display in the option text, you could do
         something like the following: 

         (NOTE: ng-model is required for ng-options to work)
         -->
    <select ng-model="selectedValue" ng-options="p as p.name for p in allParameters"></select>

    <!-- this is just to display the value you've selected -->
    <p>Selected:</p>
    <pre>{{selectedValue | json}}</pre>
  </div>
</body>
</html>

编辑：IE中的常见问题

首先，如果您在IE中遇到问题，我建议您点击F12并查看您在控制台中遇到的错误。

我见过的最常见的问题是IE中的内容与IE中不存在的console.log()等命令有关。如果是这种情况，您需要创建一个存根，如下所示：

//stub in console.log for IE.
console = console || {};
console.log = console.log || function () {};

Answer 2

我认为这是一个IE问题。请在更新前尝试设置display:none，然后在更新后删除display设置。

Answer 3

我相信这是bug最终的问题。我已经把我的头发拉出了几天非常相似的东西，一个选择过滤了另一个。

在一天结束时OPTIONS正在动态添加，而IE9只是呛到它。

<div class="col-lg-2">
    <div class="form-group">
        <label>State</label>
        <select data-ng-model="orderFilter.selectedState"
                data-ng-options="s.StateAbbr for s in states"
                data-placeholder="choose a state…"
                class="form-control">
            <option value=""></option>
        </select>
    </div>
</div>
<div class="col-lg-2">
    <div class="form-group">
        <label>County</label>
        <select data-ng-model="orderFilter.selectedCounty"
                data-ng-options="c.CountyName for c in filteredCounties | orderBy:'CountyName'"
                data-ng-disabled="orderFilter.selectedState == null"
                data-placeholder="Choose a county…"
                class="form-control">
            <option value=""></option>
        </select>
    </div>
</div>

此致斯蒂芬

angularjs $ scope。$ apply（）不会更新ajax IE9上的选择列表

3 个答案: