How to re-bind data in ng-repeater

Question

It works when the first bind occurs,I want the list rebind data when a select input(id is 'checkin') changes,what should I do?

var m = angular.module('users', []);

m.controller('UserList', function($scope) {

    $scope.getdata = function() {
        var u = "http://www.example.com/admin?queryusers";
        var userlist = this;
        var body = {
            activityid: "10",
            checkin: $('#checkin').val()
        };
        $.ajax({
            url: u,
            type: "post",
            async: false,
            data: body,
            success: function(data) {
                userlist.users = data;
            }
        });
        return userlist.users;
    };

    this.users=$scope.getdata();

    $('#checkin').change(function() {
        this.users=$scope.getdata();
        $scope.$apply();
    });

});

changed bold to normal text to make it readable – Rikesh Jun 11 '15 at 03:40 — Rikesh, Jun 11 '15 at 03:40

Pankaj Parkar · Accepted Answer · 2015-06-08T10:18:45.610

Your Problem is you are using jQuery in angularjs that is missing with angular digest cycle thats why binding is not updating on html.

You shouldn't use $.ajax inside angular, that will messed up with angular digest cycle, you need to use $http call that will do ajax call safely, & update the binding after ajax gets completed.

Also you shouldn't use jquery event on element inside angular, you have to replace that change event to use ng-change then there will not need to worry about digest cycle.

Markup

<input type="checkbox" id="checkin" ng-model="myCheckbox" ng-change="getdata()"/>

Controller

var m = angular.module('users', []);

m.controller('UserList', function($scope, $http) {

    $scope.getdata = function() {
        var u = "http://www.example.com/admin?queryusers";
        var userlist = this;
        var body = {
            activityid: "10",
            checkin: $('#checkin').val()
        };
        $http({
            url: u,
            method: "post",
            //async: false,
            data: body,

        }).success(function(data) {
            userlist.users = data;
        });

    };

    this.users = $scope.getdata();

    //below code will call getdata directly from html on ng-change
    //$('#checkin').change(function() {
    //    this.users = $scope.getdata();
    //    $scope.$apply();
    //});

});

Thank you very much! But console tells "No 'Access-Control-Allow-Origin' header is present on the requested resource." when I follow your steps.I already added the header at server side and it also works for jquery request.Please help.BTW:do not need return value for getdata function? — user3287349, Jun 08 '15 at 10:48

How to re-bind data in ng-repeater

1 Answers1