如果JSON数组为空，如何禁用下一个和上一个按钮？

Question

Hi im using AngularJS to get a JSON objects like this one

 "_embedded": {
    "incidents": [
        {
            "id": 1,
            "name": "Golpe",
            "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
            "timestamp": "2015-01-01T00:00:00-0700",
            "upload_date": "-0001-11-30T00:00:00-0700",
            "archived": false,
            "_links": {
                "self": {
                    "href": "http://incidents-core/app_dev.php/incidents/1"
                },
                "attachments": {
                    "href": "http://incidents-core/app_dev.php/incidents/1/attachments"
                },
                "comments": {
                    "href": "http://incidents-core/app_dev.php/incidents/1/comments"
                },
                "thumbnail": {
                    "href": "http://incidents-core/app_dev.php/attachments/33/download"
                }
            },
            "_embedded": {
                "device": "Samsung 300",
                "employee": "Juan Lopez",
                "incident_type": "Golpe",
                "profile": "PruebaUpdate",
                "attachmentsCount": 7,
                "commentsCount": 15
            }
        },

now i use Bootstrap modal window to show all the objects, and i made this methods for Next and Previous object.(this works but, for some reason , when i click on next, works fine , but when i click on previous , starts in 2 less, when im in the object in position [0], in code is [-2])

 $scope.incidentSelected = [];

$scope.selectIncident = function (index) {
    $scope.incidentSelected = $scope.incidents[index];
    $scope.nextIndex = index + 1;
    $scope.prevIndex = index - 1;

    $scope.nextIncident = function () {  
        $scope.selectIncident($scope.nextIndex);
        console.log($scope.nextIndex);

    };

    $scope.prevIncident = function () {
        $scope.selectIncident($scope.prevIndex);
        console.log($scope.prevIndex);
    };

How Can I disable the buttons when the array is empty ? this is my modal windows code:

<!-- Modal -->
<div class="modal fade  bs-example-modal-lg" id="incidentModal" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Incident Name: {{incidentSelected.name}}</h4>
                <button id="prev" class="btn btn-success" type="submit" ng-click="prevIncident()">Previous</button>
                <button id="next" class="btn btn-success" type="submit" ng-click="nextIncident()">Next</button>
            </div>
            <!-- /.modal-header -->
            <!--/.modal-header -->
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="modal-body row">
                        <div class="col-lg-6">
                            <p class="nocommnts-alert" ng-show="!attachmensresults.length">There are no attachments!</p>
                            <div class="attachmentlist">
                                <ul ng-repeat="image in images | filter:query as attachmensresults">
                                    <li>
                                        <a href="{{image._links.file.href}}" data-lightbox="example-set" data-title="Click the right half of the image to move forward.">
                                            <div class="img-preview">
                                                <img ng-src="{{image._links.file.href}}" alt="" />
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <!-- /.attachmentlist -->
                        </div>
                        <!-- /.col-lg-6 -->
                        <div class="col-lg-6">
                            <label>Category: </label> {{ incidentSelected._embedded.incident_type}}
                            <br />
                            <label>Description: </label>
                            <div class="Incidentdescrptn">
                                {{ incidentSelected.description }}
                            </div>
                            <br />
                            <label>Employee: </label> {{ incidentSelected._embedded.employee }}
                            <br />
                            <label>Date of Incident: </label> {{incidentSelected.timestamp | date:'EEE'}}{{incidentSelected.timestamp | date:' - dd/mm/yyyy'}}
                            <br />
                            <label>Hour of Incident: </label> {{incidentSelected.timestamp | date:'hh:mm:ss a'}}
                            <br />
                            <label>Device: </label> {{incidentSelected._embedded.device}}
                            <br />
                            <button type="button" class="btn btn-default" data-toggle="modal" href="#stack2"><span class="glyphicon glyphicon-envelope"></span> Send by Email</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-trash"></span> Archive</button>
                        </div>
                        <!-- /.col-lg-6 -->
                    </div>
                    <!-- .modal-body row -->
                    <div class="clearfix"></div>
                    <div class="commntSection">
                        <div class="row">
                            <div class="span4 collapse-group">
                                <p><b>{{commntresults.length}}</b> Comments</p>
                                <div class="collapse" id="viewdetails">
                                    <p class="nocommnts-alert" ng-show="!commntresults.length">There are no comments!</p>
                                    <div class="col-sm-12">
                                        <div id="commnts" ng-repeat="comment in comments | filter:query as commntresults">
                                            <div class="avatar-frame">
                                                <img src="img/grumpy.jpg" alt="" />
                                            </div>
                                            <div class="commnt_cont">
                                                <b>User:</b>
                                                <p>{{comment.message}}</p>
                                            </div>
                                            <!-- ./commnt_cont -->
                                            <br />
                                            <div class="line-separator"></div>
                                            <br />
                                        </div>
                                        <!-- /#commnts -->
                                    </div>
                                    <!-- ./col-sm-12 -->
                                </div>
                                <!-- ./collapse -->
                                <a class="btn showdetails" data-toggle="collapse" data-target="#viewdetails"></a>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <form ng-submit="processForm()">
                                            <div class="form-group">
                                                <textarea ng-keyup="$event.keyCode == 13 ? processForm() : null" required ng-model="formData.comment.message" class='autoExpand' rows='1' data-min-rows='1' id="message" placeholder="Write a comment.... :)"></textarea>
                                            </div>
                                            <!-- /.form-group -->
                                            <button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-heart"></span> Comment</button>

                                        </form>
                                    </div>
                                    <!-- /.col-sm-12 -->
                                </div>
                                <!-- /.row -->
                            </div>
                            <!-- /.collapse-group -->
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.commntSection -->
                </div>
                <!-- /.container-fluid-->
            </div>
            <!-- /.modal-body-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
            <!-- /.modal-footer -->
        </div>
        <!-- /.modal-content-->
    </div>
    <!-- /.modal-dialog modal-lg-->
</div>
<!-- /.modal fade  bs-example-modal-lg -->

Answer 1

使用ng-disabled="incidents.length===0"

Answer 2

在使用引导程序时，也可以使用ngClass指令将禁用的类应用于按钮

<button ng-class="{disabled:incidents.length===0}" ...