我循环使用JSON来显示公司名称及其下的分部,但问题是如何停止显示公司名称为空的分部名称
这是我的代码
<div ng-app="myapp" ng-controller="FirstCtrl">
<div class="box-footer no-padding">
<ul class="nav nav-stacked">
<li ng-repeat="item in tickets" ng-if="item.name!='' && item.name">
<a class="clearfix">
{{item.name}}
<span ng-repeat="form in item.forms" class="pull-right badge ml5" >{{form.name}}</span>
</a>
</li>
</ul>
</div>
</div>
您可以尝试使用ng-if="item.name!='' && item.name"
如果公司名称为空或未定义,我不想显示分部。
这是我的小提琴
答案 0 :(得分:1)
答案 1 :(得分:0)
使用ng-if="item.name"
,以便检查null
和空值
试试这个,作为参考,我在$scope.tickets
中添加了另一个对象name: null
<html>
<head>
<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script>
var app=angular.module("myapp", []);
app.controller("namesctrl", function($scope,$http){
$scope.tickets = [{
"name": "",
"forms": [
{
"id": 1,
"name": "HR",
"created_at": null,
"updated_at": null,
"role": "primary"
}]
},{
"name": null,
"forms": [
{
"id": 1,
"name": "HR",
"created_at": null,
"updated_at": null,
"role": "primary"
}]
},
{
"name": "TCS",
"forms": [
{
"id": 1,
"name": "DEV",
"created_at": null,
"updated_at": null,
"role": "primary"
},
{
"name": "HR",
"created_at": null,
"updated_at": null,
"role": "primary"
},
{
"name": "HR",
"created_at": null,
"updated_at": null,
"role": "primary"
}]
}]
});
</script>
</head>
<body ng-app="myapp" ng-controller="namesctrl">
<div class="box-footer no-padding">
<ul class="nav nav-stacked">
<li ng-repeat="item in tickets" ng-if="item.name">
<p class="clearfix">
{{item.name}}
<span ng-repeat="form in item.forms" class="pull-right badge ml5" >{{form.name}}<br></span>
</p>
</li>
</ul>
</div>
</body>
</html>
答案 2 :(得分:0)
您的小提琴可能无效,因为您使用的是 Angular 1.0.1 which has some issue in ng-if
。如果您确实在使用此版本,则可以将ng-if
替换为ng-show
(这将在DOM中创建隐藏元素)。
无论如何,最好的解决方案是使用 Angular 1.2 + 修复ng-if
中的ng-repeat
个错误。正如您在以下代码段中看到的那样,我没有更改您的代码,而且它可以正常运行。
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope) {
$scope.tickets = [{
"name": "",
"forms": [{
"id": 1,
"name": "HR",
"created_at": null,
"updated_at": null,
"role": "primary"
}]
}, {
"name": "TCS",
"forms": [{
"id": 1,
"name": "DEV",
"created_at": null,
"updated_at": null,
"role": "primary"
}, {
"name": "HR",
"created_at": null,
"updated_at": null,
"role": "primary"
}]
}]
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"/>
<div ng-app="myapp" ng-controller="FirstCtrl">
<div class="box-footer no-padding">
<ul class="nav nav-stacked">
<li ng-repeat="item in tickets" ng-if="item.name != '' && item.name">
<a class="clearfix">
{{item.name}}
<span ng-repeat="form in item.forms" class="pull-right badge ml5" >{{form.name}}</span>
</a>
</li>
</ul>
</div>
</div>
&#13;
Forked your Fiddle here (刚刚更改了Angular版本)。