3

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.

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();  
  }
);
Stewie
  • 60,366
  • 20
  • 146
  • 113
user2201001
  • 31
  • 1
  • 2

3 Answers3

6

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

EDIT: A common problem in 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.

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:

//stub in console.log for IE.
console = console || {};
console.log = console.log || function () {};
Community
  • 1
  • 1
Ben Lesh
  • 107,825
  • 47
  • 247
  • 232
  • Thanks for your post. I read that article a while back and I found it to be very informative. Secondly, I tried to do it the way you described before creating this thread and I got the same results. It works in FF but not in IE. Also, I'm trying to update a select-list, not a ul/li. The ul/li list works for me in IE and FF (I have one on the same page) It's the select that doesnt get updated after $scope.$apply(); – user2201001 Mar 22 '13 at 23:05
  • I've added a select to the example for you to see. – Ben Lesh Mar 22 '13 at 23:18
  • How do you pass data via get? – user2201001 Mar 23 '13 at 10:26
  • Is there a way to send parameters without doing it via the qureystring and not having to use POST? Or does it not matter if it's a post or not? – user2201001 Mar 23 '13 at 10:33
  • GET in http is *always* going to send data via querystring. If you're going to send data in the body of the request, you need to use POST or PUT. – Ben Lesh Mar 24 '13 at 00:07
2

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

Snekse
  • 15,474
  • 10
  • 62
  • 77
  • Absolutely correct!, it's an IE9 issue, but more importantly your answer is correct in my case. Using ng-show/ng-hide sets display, which for whatever reasons causes IE to re-evaluate the new array of items. – Stephen Patten Mar 02 '14 at 22:40
  • Awesome!!! How did you ever think of it ? It is strange that it happens only for certain select, not all. – SKR Dec 01 '14 at 11:09
0

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.

<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

Stephen Patten
  • 6,333
  • 10
  • 50
  • 84