Question

我循环使用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"

如果公司名称为空或未定义，我不想显示分部。

这是我的小提琴

http://jsfiddle.net/9fR23/416/

Answer 1

<iframe>不是布尔值，因此您可以在没有第二个条件的情况下使用item.name。

ng-show

<强> Your Forked Plunker

Answer 2

使用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>

Answer 3

您的小提琴可能无效，因为您使用的是 Angular 1.0.1 which has some issue in ng-if。如果您确实在使用此版本，则可以将ng-if替换为ng-show（这将在DOM中创建隐藏元素）。

无论如何，最好的解决方案是使用 Angular 1.2 + 修复ng-if中的ng-repeat个错误。正如您在以下代码段中看到的那样，我没有更改您的代码，而且它可以正常运行。

＆＃13;

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版本）。

使用ng-repeat

3 个答案: