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

So to keep it simple, im trying to update my select list with a new list of items that i get from an ajax-call. The list has the items. I set the model to the new list and do a $scope.$apply(). This works great in firefox, but not in IE. What am I doing wrong? Is there some IE9-thing that I'm missing? (I've been looking for a few hours now and am ready to give up). Appreciate all the help I can get.

所以为了简单起见,我试图用我从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();  
  }
);

3 个解决方案

#1

You'd be way better off doing this the "Angular way". No JQuery required! In fact, if you find yourself doing things the "JQuery way" you're probably doing it wrong. Mark Rajcok had a really good question (and answer) about this same thing on * a while ago:

你可以通过“Angular方式”做得更好。不需要JQuery!事实上,如果你发现自己以“JQuery方式”做事,那你可能做错了。不久前,Mark Rajver在*上有一个非常好的问题(和答案):

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>

EDIT: A common problem in IE

编辑:IE中的常见问题

So first of all, if you're having a problem in IE, I'd recommend hitting F12 and seeing what errors you're getting in the console.

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

The most common issue I've seen that breaks things in IE relate to commands such as console.log() which don't exist in IE. If that's the case, you'll need to create a stub, like so:

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

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

#2

I think it's an IE issue. Try setting display:none before you update, then remove the display setting after you update.

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

#3

I believe it is this bug that is ultimately the problem. I've been pulling my hair out for a couple of days on something very similar, a select filtered off of another.

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

At the end of the day OPTIONS are being added dynamically and IE9 just chokes on it.

在一天结束时,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>

Regards, Stephen

#1