CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeat
techie20
techie20

Reputation: 508

How to update ng-repeat after updating array

I have a following controller 

app.controller('MainController', function($scope, $interval,$mdToast, $document, $mdDialog,$timeout,$mdDialog) {
var stops=[
    {
      stopName:"testinput1",
      noOfStudents:2
    },
    {
      stopName:"testinput2",
      noOfStudents:2
    },
    {
      stopName:"testinput3",
      noOfStudents:4
    }
]; 

$scope.list=stops;


$scope.addStop=function(name,noOfstudent){
    stops.push({
      stopName:name,
      noODstudent:noOfstudent      
      })
    $scope.list=stops;
}
});

in my view I have following code,

 <md-list id="stopList">
      <md-list-item  class="md-3-line" ng-repeat="item in list" style="background:rgb(233, 233, 233);margin:10px;padding-left: 10px;position: relative;min-height: 60px;">
        <div class="md-list-item-text">
          <h3>{{item.stopName}}</h3>
          <h4>{{item.noOfStudents}}</h4>
        </div>
          <div ng-show="deleteIcon" ng-click="showConfirm($event);" class='delete_icon'></div>
      </md-list-item>
    </md-list>

The issue I am facing is when I add a stop, the ng-repeat list does not get updated. I want the view to be updated as I add a stop. I am taking the user input from angular material dialog.

Upvotes: 0

Views: 595

Answers (4)

Shohel
Shohel

Reputation: 3934

Try this

$scope.addStop = function (name, noOfstudent) {
    stops.push({
        stopName: name,
        noODstudent: noOfstudent
    });

    $timeout(function () {
        $scope.list = [];
        $scope.list = stops;
    }, 0);
};

Upvotes: 0

batmaniac7
batmaniac7

Reputation: 422

Here is a plnkr: http://plnkr.co/edit/HlzxQ9sqbMbxDiraT22z?p=preview Seems to be working for me

var name = 'l'
var noOfStudents = 5

$scope.addStop=function(){
stops.push({
  stopName:name,
  noOfStudents:noOfStudents      
  })
$scope.list=stops;
}

i have used static data but there should not be any problem

Upvotes: 0

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

You don't need to push to stop

Just direct push to $scope.list

When stop assigned in the list it'll assign reference if one is updated another will also 

$scope.list=stops;

Like this 

$scope.list.push({
    stopName: name,
    noODstudent: noOfstudent
})

Upvotes: 1

binariedMe
binariedMe

Reputation: 4329

Data will be updated automatically in view after you update it in controller. What problem (may be ) you are facing is typo in addStop function.

You have used two dots when updating list. >> $scope..list=stops;

Upvotes: 1

Related Questions