您好我使用AngularJS来获取像这样的JSON对象
"_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
}
},
现在我使用Bootstrap模态窗口来显示所有对象，我为Next和Previous对象制作了这个方法。（这可行但是，出于某种原因，当我点击下一步，工作正常，但当我点击之前，当我在位置[0]中的对象中，在代码中为[-2]）
时，开始少于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);
};
如何在阵列为空时禁用按钮？ 这是我的模态Windows代码：
<!-- 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">×</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 -->
答案 0 :(得分：2)
使用ng-disabled="incidents.length===0"
答案 1 :(得分：1)
当您使用bootstrap时，您也可以使用ngClass指令将禁用的类应用于按钮
<button ng-class="{disabled:incidents.length===0}" ...