CODEWITHSUNDEEP
angularjsknockout.js
Code_Viking
Code_Viking

Reputation: 628

Filter a list with AngularJs while using Knockout for populating the list

I am new with angular, and knockout. But i have managed to create a list with paging using knockout. But i wish to filter the list dynamically, while the user types in a input box using angular if this is possible?
This is my knockout script where i create the paging.

<script>
function formattedPrice(amount) {
    var price = amount.toFixed(2)
    return price;
}

function StatementViewModel() {
    var self = this;

    self.transactions = @Html.Raw(JsonConvert.SerializeObject(Model, new JsonSerializerSettings { ReferenceLoopHandling= ReferenceLoopHandling.Ignore })); 
    self.pageSize = 8;
    self.currentPage = ko.observable(1);
    self.lastPage = Math.ceil(self.transactions.length / self.pageSize);
    self.currentTransactions = ko.computed(function () {
        var startIndex = (self.currentPage() - 1) * self.pageSize;
        var endIndex = startIndex + self.pageSize;
        return self.transactions.slice(startIndex, endIndex);
    });

    self.nextPage = function () {
        self.currentPage(self.currentPage() + 1);
    };
    self.previousPage = function () {
        self.currentPage(self.currentPage() - 1);
    };
};
ko.applyBindings(new StatementViewModel());


The script underneath is an angular script that filters a list while the user types. But how do i connect these two? and is i possible?

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
});

Upvotes: 1

Views: 37

Answers (1)

fikkatra
fikkatra

Reputation: 5822

It doesn't make sense to use both angular AND knockout. Angular provides 2-way binding out of the box, so just use that instead of knockout.

Upvotes: 2

Related Questions