1. 技术文章
  2. AngularJS & JSON - Obtain Value from Previous & Next Object

AngularJS & JSON - Obtain Value from Previous & Next Object

由 蓝咒 提交于 2019-12-03 09:09:30

I would probably do something like this: create functions to your controller to get the previous and next indexes (to handle the index overflows):

$scope.getNextCategoryIndex = function(currentIndex) {
  var nextIndex = currentIndex+1;
  if (nextIndex >= $scope.employees.length) {
    // move over to start if we already were at the end of the list
    nextIndex = 0;
  }
  return nextIndex;
}

$scope.getPrevCategoryIndex = function(currentIndex) {
  var prevIndex = currentIndex+1;
  if (prevIndex < 0) {
    // move over to the last index, if we already are at the start
    prevIndex = $scope.employees.length - 1;
  }
  return prevIndex;
}

And then in the HTML call those functions using $index (the current index of ng-repeat, see AngularJS documentation for ngRepeat for more details) as parameter:

    <!-- Next & Previous Buttons -->
    <div class="btn-nextprev">
        <div class="next-container">
            <a href="" class="btn btn-next" id="next">
                {{employees[getNextCategoryIndex($index)].category}}
            </a>
        </div>
        <div class="prev-container">
            <a href="" class="btn btn-prev" id="prev">
                {{employees[getPrevCategoryIndex($index)].category}}
            </a>
        </div>
    </div>
    <!-- END Next & Previous Buttons -->

The code you need should be:

{{employees[$index - 1].category}} //For the prev
{{employees[$index + 1].category}} //For the next

Recent Update (09-Apr-2015):

I have now been able to achieve what I wanted, on click of the button the relevant function runs and loops through the category names. One more thing to add now is that the buttons run in sync.

Controller

//Next & Previous Button Category Label
    $scope.i = 0;
    $scope.j = $scope.employees.length;
    $scope.nextCat = $scope.i + 1;
    $scope.prevCat = $scope.j - 1;

    $scope.getNext = function(){
        //console.log($scope.nextCat);
        $scope.nextCat++;
        if( $scope.nextCat >= $scope.employees.length ){
            $scope.nextCat = 0;
        }

        $scope.prevCat++;
        if( $scope.prevCat >= $scope.employees.length ){
            $scope.prevCat = 0;
        }

    };

    $scope.getPrev = function(){
        //console.log($scope.nextCat);
        $scope.prevCat--;
        if( $scope.prevCat < 0 ){
            $scope.prevCat = $scope.employees.length - 1;
        }

        $scope.nextCat--;
        if( $scope.nextCat < 0 ){
            $scope.nextCat = $scope.employees.length - 1;
        }
    };

HTML

<!-- Next & Previous Buttons -->
        <div class="btn-nextprev">
            <div class="next-container">
                <a href="" class="btn btn-next" id="next" 
                ng-click="getNext()"> 

                </a>
                {{ employees[nextCat].category }}
            </div>
            <div class="prev-container">
                <a href="" class="btn btn-prev" id="prev"
                ng-click="getPrev()">
                </a>
                {{ employees[prevCat].category }}
                <!-- {{ employees[prevCat].category }} -->
            </div>
        </div>
        <!-- END Next & Previous Buttons -->

Update: This is still not going to be a viable solution. I am technically able to achieve what is required however I am still required to use position: fixed. This means that the Category label then disappears.

I am now going to try and achieve this without it being within the ng-repeat and using ng-click it will iterate to the next Category name. Hopefully this will be the solution, and I will update upon any success/failure.

Update:

I am yet to find my optimal solution however, my current workaround for this utilises @jmustonen's solution.

Outside of the bxSlider I have the custom arrow's (if I placed these inside there were issues with the arrows not duplicating across pages - I believe there's an issue with it when it has position:fixed).

Then within my ng-repeat I include...

{{ employees[getNextCategoryIndex($index)].category }}

I will then be required to do some CSS in order for this to appear as if it is displayed as part of the Next/Previous buttons. Again these become invisible if position: fixed is used.

标签
javascript
json
angularjs
angularjs-scope
angularjs-ng-repeat
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!