Angularjs ng-repeat does not update after changing $scope variable

Question

Hi I am new to Angularjs. I am changing the $scope variable on dropdown list selection. that scope variable is used for ng-repeat on div.

html code:

<div class="col-md-6" ng-repeat="model in FilteredModels | filter:{ModelText : '!All models'}:true">
          <div class="well">
            <div class="media">
              <div class="media-object small"><i class="pp-car"></i></div>
              <div class="media-body">  
                <div class="text-box">                                      
                  <h3>{{model.ModelText}}</h3><span class="hr-small"></span>
                </div>
                <div class="dashboard-control clearfix">
                  <div class="simple-metric text-left sub-metric">
                    <div class="metric-title">Satisfaction score</div>
                    <div class="metric-number text-red">{{model.SatisfactionAvg | number:2}}</div>
                  </div>
                  <div class="simple-metric text-left sub-metric">
                    <div class="metric-title">Total interviews</div>
                    <div class="metric-number">{{model.TotalInterviews}}</div>
                  </div>
                </div>
                <ul class="list-standard">
                  <li> <a href="" ng-click="openModal($index)" class="text-black trigger-model-interviews">View interviews</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

angularjs code :

function filtermodelbyId() {
    $scope.FilteredModels = [];

    dataFactory.getModelIdByFilter($scope.region, $scope.subregion).success($scope.handleSuccess).then(function (result) {
        $scope.FilteredModelIds = result.data;
    });

    if ($scope.FilteredModelIds != null && $scope.FilteredModelIds.length > 0) {
        for (var j = $scope.FilteredModelIds.length - 1; j >= 0; j--) {
            for (var i = $scope.models.length - 1; i >= 0; i--) {
                if ($scope.models[i].ModelId == $scope.FilteredModelIds[j]) {
                    $scope.FilteredModels.push($scope.models[i]);
                }
            }
        }
    }
}

On change of dropdown list this filtermodelbyId() function gets call and i am pushing new values but this gets reflected after the second change on dropdown list.

is there any better way to represent this.

Thanks.

possible duplicate of How to return the response from an AJAX call? — Stewie
– Stewie, Commented Jan 10, 2014 at 11:55

Jayantha Lal Sirisena · Accepted Answer · 2014-01-10 07:22:40Z

2

Seems like you are not using $http in dataFactory.getModelIdByFilter . try using

$scope.$apply(function(){
  $scope.FilteredModelIds = result.data;
});

Or else you can use angular services to load data (Assuming that you are using jquery ajax.)

answered Jan 10, 2014 at 7:22

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2014-01-10 07:21:53Z

1

You need to write if after $scope.FilteredModelIds is set

dataFactory.getModelIdByFilter($scope.region, $scope.subregion).success($scope.handleSuccess).then(function (result) {
    $scope.FilteredModelIds = result.data;
    if ($scope.FilteredModelIds != null && $scope.FilteredModelIds.length > 0) {
        for (var j = $scope.FilteredModelIds.length - 1; j >= 0; j--) {
            for (var i = $scope.models.length - 1; i >= 0; i--) {
                if ($scope.models[i].ModelId == $scope.FilteredModelIds[j]) {
                    $scope.FilteredModels.push($scope.models[i]);
                }
            }
        }
    }
});

answered Jan 10, 2014 at 7:21

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

null · Accepted Answer · 2014-01-10 07:26:18Z

0

Just of quick wild guess:

function filtermodelbyId() {
    $scope.FilteredModels = [];

    dataFactory.getModelIdByFilter($scope.region, $scope.subregion).success($scope.handleSuccess).then(function (result) {
        $scope.FilteredModelIds = result.data;

        if ($scope.FilteredModelIds != null && $scope.FilteredModelIds.length > 0) {
            for (var j = $scope.FilteredModelIds.length - 1; j >= 0; j--) {
                for (var i = $scope.models.length - 1; i >= 0; i--) {
                    if ($scope.models[i].ModelId == $scope.FilteredModelIds[j]) {
                    $scope.FilteredModels.push($scope.models[i]);
                    }
                }
            }
        }
    });
}

Change the model array in the callback.

answered Jan 10, 2014 at 7:26

null

7,9163 gold badges39 silver badges38 bronze badges

1 Comment

Samir Shah Over a year ago

That's what issue is the array doesnt set on callback so i am getting response of previous select.

Collectives™ on Stack Overflow

Angularjs ng-repeat does not update after changing $scope variable

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related