for loop in js code

Question

I am loading each div based on certain timeperiod which is defined in js file. I have 4 div's. I want to load div 4(ng-if="show ==4") only if list size is greater than zero(detailsList1 > 0).Below is the code i have used:

<div ng-if="show ==4" ng-controller="detailsController" ng-hide="$rootScope.detailsList1==0">
      <div ng-repeat="data in details" id="{{data.Id}}">
         <div ng-repeat="(key, value) in data" id="{{data.Id}}">
          {{value}}
         </div>
     </div>
  </div>

If the list size is zero it should not wait for the interval to complete, instead skip this div and load another div.

Sample demo:http://plnkr.co/edit/R4yYM522OS3PMIZ5zfzn?p=preview

Any suggestions on how to skip the $interval if list to load in a particular div is zero

Tyler · Accepted Answer · 2017-10-16 22:03:03Z

1

Why not just do all of the hide/show logic in the ng-if i.e.

ng-if="show == 4 && $rootScope.detailsList1.length > 0"

This would cause the browser to not render the div unless both of those conditionals are true.

Just some random info about ng-if, ng-show and ng-hide that might be helpful as well.

ng-if will only add the html it is wrapped around to the DOM if it is true. If it is false, it removes the html completely. This means you won't be able to access any element in this block if the ng-if is false.

ng-show/ng-hide on the other hand will still create the html to be displayed in the DOM, it will just add ng-hide as a class when the element should be hidden. This allows the elements to still be accessed with JavaScript even though they aren't visible.

The above was a misunderstanding of the question, I will leave it as it may be helpful when dealing with ng-if, ng-show, and ng-hide.

After playing with your plunker, I was able to get it working, although I think you should definitely clean up your variables. Rather than using $rootScope.detailsList1 to keep track of the number of items in your array, you should just use $scope.details.length. It will be a lot cleaner, easier to read, and easier to maintain in the future. Also, I'm not sure if they are bugs or intentional, but you have 3 different lists, all seemingly for the same thing, $rootScope.detailsList1, $scope.details, and $rootScope.detailsList. From just the snippet in plunker, I would assume all 3 of these should reference the same array, and none of it should be on the rootScope. If you need to pass it between controllers you would be better served using a service.

Having said that, to fix your current code base, just add this check to the end of the interval function

$interval(function() {

    if ($scope.show === 4) {
        if ($rootScope.detailsList <= $rootScope.detailsList1-1) {
            ++$rootScope.detailsList;
        } else {
            $rootScope.detailsList = 0;
            $scope.show = 1;
        }
    }
    else if ($scope.show < 4) {
        ++$scope.show; 
    } else {
        $scope.show = 1;
    }

    // if the details list is empty and show is 4, skip back to 1
    if ($rootScope.detailsList === 0 && $scope.show === 4) {
        $scope.show = 1;
    }

}, 5000, 0);

edited Oct 16, 2017 at 22:03

answered Oct 16, 2017 at 20:00

Tyler

1,0491 gold badge8 silver badges20 bronze badges

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

7 Comments

Jeff Woodard Over a year ago

Good information here, however I'd recommend against complex logic directly in the HTML and instead extracting that out into a separate method in the controller.

user8727958 Over a year ago

@Tyler - No it is not working, please find the updated code plnkr.co/edit/RbcDfgsankQxETI4Z9ym?p=preview . I think it is some thig with the $interval we need to deal as for each show =1 or show=2 or show=3 or show=4 I have specified the interval $interval(function() {..} in app.js.That's the reason even when I added ng-if="show ==4 && $rootScope.detailsList1.length > 0" it is showing the blank page for 5seconds.

user8727958 Over a year ago

@Tyler - +1, but when implemented in demo plunker it is not working as expected. Please find the updated pnlkr plnkr.co/edit/sKZuQesNWKji02Xrv02C?p=preview with the suggested code, it is failing and not showing div 4 even when $scope.details length is not zero.In div4 i'm showing each item in the list as a slide(that is the reason u will see in the demo plnkr.co/edit/GiivaMe6PrGn3STG1EdD?p=preview ,each item in the list separately).Any inputs?

Tyler Over a year ago

@user8727958 It is because you are only adding to $scope.detailList when show ===4, but since you are skipping the interval function if $scope.detailList === 0, $scope.detailList is never getting incremented. This is why I'm not sure why you are using $scope.detailList and $rootScope.detailList1. Only detailList1 has a value other than 0.

user8727958 Over a year ago

$rootScope.detailsList1 has actual list size, as in detailsCOntroller i'm iterating $scope.details to know the list size and storing in $rootScope.detailsList1 as shown in plnkr.co/edit/jL8Dz242tKMXPGOBbyzi?p=preview. And to see each list item of $scope.details separately i'm iterating starting from 0 to less than $rootScope.detailsList1 (i.e.,if ($rootScope.detailsList < $rootScope.detailsList1) {..}) .Please see plnkr.co/edit/ePyj8QqSYivQKaqVVi9u?p=preview which iterates the list of items and shows each item separately.@Tyler

|

Collectives™ on Stack Overflow

for loop in js code

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related