ngRepeat through Array, hide other arrays and use next/previous to display

Question

I have an api that has 8 array objects that display fine but my angular code will not hide or show one array at a time. This is just a testing code and will be separated out later. The buttons work because I can see the index go up and down when I click on it but it still displays the whole list.

<div class="col-md-2-4"
     ng-class="{'filenum-hide': index  > $index + 1}">

    <ul>
        <li class="clearfix" ng-repeat="a in complaints">
            <div class="pull-left">
                {{a.FileNum}}
            </div>
        </li>
    </ul>

</div>
<div>
    <button type="button" class="btn btn-next" ng-click="index = index < complaints.length ? index + 1 : complaints.length">Next</button>
    <button type="button" class="btn btn-pre" ng-click="index = index > 1 ? index - 1 : 1">Previous</button>
    {{index}}
</div>

My outcome looks like this but I want only one list that iterates through the array and only shows case1, then click next, and it will show cw1dpd, etc.

Response to console.log(data) (sorry I haven't figured out how to angular.toJson log it in a nice format that you can see the nested objects so i snapshotted the console log)

Error when displaying $scope.complaints = $scope.comp[0];

@SabarishSenthilnathan, I posted a console.log of the array because the json api looks really messy. — EPV, Feb 01 '16 at 23:30

score 1 · Accepted Answer · answered Feb 04 '16 at 04:21

1

Here's a working fiddle - http://jsfiddle.net/HB7LU/23292/. From what I understand, you want only one element from the array displayed, and clicking next display the next, and by clicking previous, display the previous element.

I render just the a single complaints' element FileNum, and render the next and the previous ones by calling getNext() and getPrevious() function by changing the array index.

Template:

<ul>
    <li class="clearfix">
       <div class="pull-left">
            {{complaints.FileNum}}
       </div>
    </li>
</ul>
<button type="button" class="btn btn-pre" ng-disabled="index == 0" ng-click="getPrevious()">Previous</button>

<button type="button" class="btn btn-pre" ng-disabled="index == items.length - 1" ng-click="getNext()">Next</button>

Controller: I stored the JSON in $scope.items containing just the FileNum.

$scope.index = 0;

$scope.complaints = $scope.items[0];

$scope.getNext = function (){
  $scope.index = $scope.index + 1;
  $scope.complaints = $scope.items[$scope.index];
}

$scope.getPrevious = function (){
  $scope.index = $scope.index - 1;
  $scope.complaints = $scope.items[$scope.index];
}

Hope this helps.

answered Feb 04 '16 at 04:21

Sabarish Senthilnathan

333
2
11

This is beautiful. I'll try it in the AM. If I wanted to add a search box to go directly to the filenum, would I just create a $scope.search(FileNum), attach it to a button. How would I set a non-index value to $scope.complaints that's a parameter? – EPV Feb 04 '16 at 04:34
You'd want to use a `filter`, something like this `$scope.item = $filter('filter')($scope.items, { FileNum: 'case2' });`. Updated fiddle - http://jsfiddle.net/HB7LU/23295/ – Sabarish Senthilnathan Feb 04 '16 at 04:43
Great. I will replace case2 with a parameter that is designated in a search box. – EPV Feb 04 '16 at 04:47
Thank you so much. I am anxious to try it. – EPV Feb 04 '16 at 04:54
Hi Sabarish, I'm having a hard time understanding or translating your $scope.items in my controller. I know that my controller works because when I use ng-repeat, it allows me to render through the list. If I create another div, like the one in the js fiddle, I try to render {{complaints.FileNum}} with no ng-repeat and nothing shows up. I plan to set the index then do $scope.complaints = $scope.complaints[0] after since I already have my data pulled through a service. Is there something I am missing? – EPV Feb 04 '16 at 16:51
Can you create a fiddle? All you have to do is replace $scope.complaints to $scope.items and the rest of the code can be same as my fiddle. – Sabarish Senthilnathan Feb 04 '16 at 19:22
Sabarish, thank you again for your help. My JS.Fiddle will not operate as it is pulling data through api, asp.net model but the concept is there: https://jsfiddle.net/3hor1wkg/9/ . I tried over and over to replicate what you have, but I think that my $scope.comp to $scope.complaints is not passing/setting correctly as rendering $scope.complaints does not work either. – EPV Feb 04 '16 at 22:07
Your fiddle won't work as such because no Service is defined so I have modified it - http://jsfiddle.net/qsL9g4y1/4/. Basically, in place of the Service call I store a dummy data in getComp() function. You're using wrong variable names and that's why the code isn't working. In your getComp() function if you had stored all the result in $scope.comp and got the first element stored in $scope.complaints. The template should have been {{complaints.FileNum}}. Hope this helps. Let me know if not. – Sabarish Senthilnathan Feb 04 '16 at 22:44
Sabarish, I actually have exactly what you had. I may have sent you the wrong version as I was testing multiple other ways and iddn't realize I needed to send a new link for updated info. I do have $scope.comp in my getComp() service, I do set the index to 0 and I do set $scope.complaints = $scope.comp[0]; I think I may have discovered the error in console.log, but still do not know how to fix it as I do have $scope.index = 0; it says undefined 0. Photo is attached to question. JSFiddle: jsfiddle.net/3hor1wkg/9 – EPV Feb 04 '16 at 22:56
Try and define `$scope.comp` outside the function like this: `$scope.comp = [];` – Sabarish Senthilnathan Feb 04 '16 at 23:01
That resolves the red error but now $scope.complaints is returning undefined in the console.log. – EPV Feb 04 '16 at 23:03
try and log $scope.comp after $scope.complaints and what does it show – Sabarish Senthilnathan Feb 04 '16 at 23:06
strange, that returns and array[0] while the inside function returns array[8]. Why would that be if ng-repeat still renders through "a in comp"? – EPV Feb 04 '16 at 23:10
Ah, this is because it's a AJAX call. http://stackoverflow.com/questions/32081084/angular-scope-not-available-outside-my-function – Sabarish Senthilnathan Feb 04 '16 at 23:15
Thank you for the reference. Could you possibly show an example for getng the response value inside the success function of $http which gets called when ajax call executed successfully. I will definitely read those resources and continue learning. This problem will be the death of me! – EPV Feb 04 '16 at 23:27
Ah yes, in your getComp() function in the service call add `$scope.apply();` after `$scope.comp = data;` That should do the trick. – Sabarish Senthilnathan Feb 04 '16 at 23:28
I did $scope.$apply and it still is returning undefined for $scope.comp outside of the function. $scope.apply() is not a function it says. – EPV Feb 04 '16 at 23:33
sorry should be `$scope.$apply();` – Sabarish Senthilnathan Feb 04 '16 at 23:35
I believe I tried that too. I'm going to take a break from this. Can we please email to try to figure this out? If so, my email is phuongena.vu@gmail.com. – EPV Feb 04 '16 at 23:38

score 0 · Answer 2 · answered Feb 01 '16 at 23:36

0

you can try something like...

<!-- You can set up another if  -->
<div class="pull-left" ng-show='$index > 10 && a.somevalue = "ABC" '>
     {{a.FileNum}}
</div>

Hope that helps you.

answered Feb 01 '16 at 23:36

Felipe Valencia

101
4

This does not work as it hides everything over 10. I want only one list that iterates through the array and only shows case1, then click next, and it will show cw1dpd, etc. – EPV Feb 01 '16 at 23:43
It was an example, you can try something that fits into your needs – Felipe Valencia Feb 02 '16 at 14:39

ngRepeat through Array, hide other arrays and use next/previous to display

2 Answers2