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