CODEWITHSUNDEEP
jqueryangularjs
NVO
NVO

Reputation: 2703

Fill angular scope with jquery

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?

Upvotes: 2

Views: 116

Answers (2)

Glenn Ferrie
Glenn Ferrie

Reputation: 10390

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;
            });                    
}]);

Upvotes: 1

Mohamed Yakout
Mohamed Yakout

Reputation: 3036

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>");

Upvotes: 1

Related Questions