Fill angular scope with jquery

Question

Is it possible to fill the angular scope with jQuery? I have an big array in jQuery with 3455 items, which I now shows with $('#div').append(<li>item</li>);

But, I want to filter in the items using a 'live search' function. I now that it can be done with angular filter and ng-repeat, but is it possible to fill the scope in jQuery?

Are you retrieving the data from a web service call? Which version of angular? Can you show some of your code? — Glenn Ferrie
– Glenn Ferrie, Commented Aug 15, 2016 at 11:43
Yes, it is a Ajax request with javascript/jquery, which I needs to show some markers on a Google map. — NVO
– NVO, Commented Aug 15, 2016 at 12:04
Use angular's $http service instead of jqeury's ajax and pass required result to scope. — atn
– atn, Commented Aug 15, 2016 at 12:17

Mohamed Yakout · Accepted Answer · 2016-08-15 11:59:08Z

1

Yes, You can do that using angular.element. Depend on you question, you can use the following:

angular.element('#div').append("<li>item</li>")

But I don't recommend this solution because of large data. And I suggest to try using pagination. Like ng-simplePagination

If you need to use jQuery in Angular Controller, You can use the following:

var jq = $.noConflict();
jq('#div').append("<li>item</li>");

edited Aug 15, 2016 at 11:59

answered Aug 15, 2016 at 11:49

Mohamed Yakout

3,0681 gold badge32 silver badges48 bronze badges

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

2 Comments

NVO Over a year ago

How does the HTML code look like? <ul ng-repeat=?? | filter: ??>

Mohamed Yakout Over a year ago

You should put ng-repeat on the repeated item not on the parent one as the following <ul><li ng-repeat="item in items">{{item}}</li></ul>. For filtering you should read the docs

Glenn Ferrie · Accepted Answer · 2016-08-16 14:35:23Z

Here is a some sample code for how to create a contact list using angular scope and resources. Hope this helps.

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-resource.js"></script>
<script src="~/Scripts/models/contactsController.js"></script>

Here is the body of the contactsController file

var mainApp = angular.module('mainApp', ['contactsControllers','contactsServices']);
var contactsService = angular.module('contactsServices', ['ngResource']);
var contactsControllers = angular.module('contactsControllers', []);

contactsService.factory('Contacts', ['$resource',
    function ($resource) {
        return $resource('/Home/Contacts', {}, {
            query: { method: 'POST', params: {}, isArray: true }
        });
}]);

contactsControllers.controller('contactListController',
    ['$scope', 'Contacts',
        function ($scope, Contacts) {
            var contacts = [];
            Contacts.query(function (data) {
                angular.forEach(data, function (person) {
                    contacts.push(person);
                });
                $scope.contacts = contacts;
            });                    
}]);

Collectives™ on Stack Overflow

Fill angular scope with jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related