Applying ajax data to angularjs select

Question

Is this even possible with jquery? My javascript code works in terms of returning data with the get statement, and after debugging I verified that the uploadCategories did indeed contain the requested objects, but for whatever reason they are not being rendered to the select tag. What am I missing here?

Javascript:

var uploadController = function($scope) {

// upload category array
$scope.uploadCategories = [];
$scope.category = "";

// get categories
$.get('/api/Upload/UploadCategories', function(data) {

    // update array
    $scope.uploadCategories = [];
    $.each(data, function(i, item) {
        $scope.uploadCategories.push({
            Id: item.Id,
            Category: item.Category
        });

        // set active category
        $scope.category = $scope.uploadCategories[0].Category;

    });
}, "json");
};

HTML:

<form class="text-center" action="/Upload/AdminUpload" method="post" 
  data-ng-controller="uploadController">

<fieldset class="form-group" style="display: inline-block;">
    <legend>File Info</legend>

    <!--Upload Category-->
    <div class="form-group">
        <label for="catId">Category</label>
        <select id="catId" ng-model="category" 
                ng-options="c.Category for c in uploadCategories"></select>
    </div>


    <button type="submit" formenctype="multipart/form-data">Upload</button>
</fieldset>

Although it is tempting to use jQuery with angular. 90% of the time it is unnecessary and results in you writing more code than you need. Use the built in modules as KayKay suggests. Other than that $scope.apply(function(){}); is the way to go. — Matthew.Lothian
– Matthew.Lothian, Commented Apr 26, 2014 at 1:51

kgautron · Accepted Answer · 2014-04-26 01:44:17Z

1

i think you need to call the $scope.$digest() function after setting the category. This makes angularJS refresh the view from the model. It is needed because your callback is in JQuery, so angular does not call the digest automatically, whereas if you use angular services instead :

$http.get('/api/Upload/UploadCategories').success(function(data){..});

the digest is implicitly be called at the end, so the refresh is automatic.

A more conventionnal way than calling the digest (but equivalent), is surrounding your callback code in a $scope.apply(function(){});, this executes your code and then calls digest.

But still the better way would be to use angular's $http.get() as it comes from the box.

edited Apr 26, 2014 at 1:44

answered Apr 26, 2014 at 1:38

kgautron

8,34510 gold badges42 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1206480 Over a year ago

That solved it thanks. So since staying in box is the recommended route, what about the jquery $.each function. Is there a preferred angular alternative?

kgautron Over a year ago

Yes there is the 'angular.forEach()' function. But it is generally not a problem to use other libraries with angular. What matters is who triggers the function call. When it's angular everything will work automatically because the '$scope.$digest()' is called at the end by the framework. But when the trigger is not angular, then the '$scope.$digest()' is not called (because the library does not know about angular) so you have to call it manually.

Collectives™ on Stack Overflow

Applying ajax data to angularjs select

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related