Search code examples
javascriptangularjsarraysangularjs-scope

AngularJS- Items within ng-repeat not updating on variable update


I have an array called altSegments, and based on $scope.firstSeg or $scope.lastSeg I'd like to display different parts of that same array. In most cases I change the altSegments array alltogether and it updates fine, but when I go from the same altSegments array to the same array but change the $scope.firstSeg and $scope.lastSeg it doesn't update properly.

I suspect it has something to do with altSegments not having changed and therefore AngularJS deciding that it's not worth it to go over the code again and re-display. How would I get around this?

<li ng-repeat="altseg in altSegments">
  <!-- For multiflight home to first -->
  <div ng-show="{{firstSeg}}" ng-repeat="flights in altseg.segment_details_1.leg_details">
    <p class="small dark">
      <strong>Flight:</strong> {{flights.Carrier}} {{ flights.FlightNumber}}
    </p>
    <p class="small dark">
      <strong>Departure:</strong> {{flights.OriginName}} | {{flights.DepartureTime | splitDT }}
    </p>
    <p class="small dark">
      <strong>Arrival:</strong> {{flights.DestinationName}} | {{flights.ArrivalTime | splitDT }}
    </p>
  </div>
  <!-- For multiflight last to home -->
  <div ng-show="{{lastSeg}}" ng-repeat="flights in altseg.segment_details_2.leg_details">
    <p class="small dark">
      <strong>Flight:</strong> {{flights.Carrier}} {{ flights.FlightNumber}}
    </p>
    <p class="small dark">
      <strong>Departure:</strong> {{flights.OriginName}} | {{flights.DepartureTime | splitDT }}
    </p>
    <p class="small dark">
      <strong>Arrival:</strong> {{flights.DestinationName}} | {{flights.ArrivalTime | splitDT }}
    </p>
  </div>


Solution

  • ng-show is an angular directive and evaluates angular code;

    Therefore; you do not need : ng-show="{{firstSeg}}"

    Remplace with : ng-show="firstSeg"

    See full documentation of ng-show here: https://docs.angularjs.org/api/ng/directive/ngShow