ng-change不会更新AngularJS视图

Question

I was working on AngularJS and trying to load products using.

$scope.update=function(){
    $scope.loading = true;
    $scope.brandString=$scope.brands.join(':');
    UpdateService.getProducts($scope).then(function (data) { $scope.loading = false; $scope.products = data.Products;}, function () {              
    });
};

$scope.changepage=function(pagenum){
    $scope.pagenumber=pagenum;
    $scope.update();
};
$scope.changeorderby=function(orderby){
    $scope.orderby=orderby;
    $scope.pagenumber=1;
    $scope.update();
}; 

$scope.updatebrands=function(id){
    var index = $scope.brands.indexOf(id);
    // Add if checked
    if ($('#'+id).is(':checked')) {
        if (index === -1) $scope.brands.push(id);
    }
    // Remove if unchecked
    else {
        if (index !== -1) $scope.brands.splice(index, 1);
    }
    $scope.update();
};

My 2nd and 3rd function ie changepage and changeorderby is working properly and updating view as well. 4th function which is being called on checkbox change also return proper data from server but doesn't update my view.

Code fo checkboxes.

<div class="listbox">
    <ul>
        <div ng-class="{active : item.Checked, inactive:!item.Checked}" ng-repeat="item in brandDetails" style="padding:1px 0">
            <div ng-class="{divchecked : item.Checked, divunchecked:!item.Checked}">
                <input type="checkbox" id="{{item.Id}}" ng-change="updatebrands(item.Id)" ng-model="item.Checked" name="{{item.Name}}" value="{{item.Id}}" style="opacity:0" class="brandName ng-pristine ng-valid" /></input>
            </div>
            <span style="margin-left: 8px; font-size: 11px;top: -1px;position: relative;">{{item.Name}}</span>
        </div>
    </ul>
</div>

What I am missing here?

Answer 1

if UpdateService.getProducts() dosen't use raw angular $http service, then angular won't know something has happend, so you need to call $scope.$apply()

 $scope.update = function(){ $scope.loading = true; $scope.brandString = $scope.brands.join(':'); UpdateService.getProducts($scope).then(function (data) { $scope.loading = false; $scope.products = data.Products; // Only if UpdateService.getProducts isn't pure $http or $q service $scope.$apply(); }, function () { // error }); }; $scope.changepage = function(pagenum){ $scope.pagenumber = pagenum; $scope.update(); }; $scope.changeorderby = function(orderby){ $scope.orderby = orderby; $scope.pagenumber = 1; $scope.update(); }; $scope.updatebrands = function(item){ var index = $scope.brands.indexOf(item.id); // Add if checked if (item.Checked) { if (index === -1) $scope.brands.push(item.id); } // Remove if unchecked else { if (index !== -1) $scope.brands.splice(index, 1); } $scope.update(); }; 

 <div class="listbox"> <ul> <li> <div ng-class="{active : item.Checked, inactive: !item.Checked}" ng-repeat="item in brandDetails" style="padding: 1px 0"> <div ng-class="{divchecked : item.Checked, divunchecked: !item.Checked}"> <input type="checkbox" id="{{item.Id}}" ng-change="updatebrands(item)" ng-model="item.Checked" name="{{item.Name}}" style="opacity: 0" class="brandName ng-pristine ng-valid" /> </div> <span style="margin-left: 8px; font-size: 11px; top: -1px;position: relative;">{{item.Name}}</span> </div> </li> </ul> </div> 

---

_{(BTW your code has still several problems.)}

_{(Provide a small example code plunkr or jsfiddle to help us help you, mock your xhr response data so we know what the results will be)}