Question

如果我错了，请纠正我，我对ng-if指令的理解就像是if和else条件，如果使用多个ng-if指令。所以在我的代码中我试图显示三个div 基于它们在返回的json内部对象（metricList）中的存在。但是它为同样的if-else创建了多个div，这是错误的。请建议。

<div ng-repeat="p in profileData">
        <div>{{p.company}}</div> 
        <div>{{p.department}}</div>

        <div ng-repeat="emp in p.metricList">

            <div ng-if="emp.Stat.Tag == 'Devo100'">
              Devo100 if condition
            </div>

            <div ng-if="emp.Stat.Tag != 'Devo100'">

              Devo100 else condition

            </div>




            <div ng-if="emp.Stat.Tag == 'Devo101'">
              Devo101 if condition
            </div>
            <div ng-if="emp.Stat.Tag != 'Devo101'">
              Devo101 else condition

            </div>



            <div ng-if="emp.Stat.Tag == 'Devo102'">
              Devo102 if condition
            </div>
            <div ng-if="emp.Stat.Tag != 'Devo102'">
              Devo102 else condition
            </div>


                <hr>

我的plunker代码网址

http://plnkr.co/edit/cfkJBD6ZIHYGCzKP4BtY

Answer 1

我修复了你的plunkr并创建了一个分叉：http://plnkr.co/edit/l3s2Rglq8Cokgxjgh7dQ?p=preview

基本上，错误的是你正在使用

<div ng-repeat="emp in p.metricList"></div>

所以你再次关闭div，你需要的是：

<div ng-repeat="emp in p.metricList">

  <div ng-if="emp.Stat.Tag == 'Devo100'">
    Devo100 if condition
  </div>

  <div ng-if="emp.Stat.Tag != 'Devo100'">
    Devo100 else condition
  </div>



  <div ng-if="emp.Stat.Tag == 'Devo101'">
    Devo101 if condition
  </div>
  <div ng-if="emp.Stat.Tag != 'Devo101'">
    Devo101 else condition
  </div>



  <div ng-if="emp.Stat.Tag == 'Devo102'">
    Devo102 if condition
  </div>
  <div ng-if="emp.Stat.Tag != 'Devo102'">
    Devo102 else condition
  </div>
</div>

请注意，正如我在https://github.com/angular/angular.js/issues/15886已经提到的那样，代码有更多可能的缺陷，例如使用==代替===。

Answer 2

观察：您使用 ng-if="....." 之外的条件 ng-repeat 。

根据plnkr

错误代码： <div ng-repeat="emp in p.metricList"></div>

在这里，您将立即关闭ng-repeat div（循环）。

工作演示

＆＃13;

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  
    $scope.profileData = [];
		$scope.profileData.push(
			   
			      {
               ID: "1",
               metricList: [{"Value":0.003,"Stat":{"parameter":0,"Name":"test0","Tag":"Devo100"}},
                             {"Value":0.004,"Stat":{"parameter":0,"Name":"test1","Tag":"Devo101"}},
                             {"Value":0.005,"Stat":{"parameter":0,"Name":"test2","Tag":"Devo102"}}],                  
               company: "MSDFT",
               department: "Sales"
              },
              {
               ID: "2",
               metricList: null,                  
               company: "MSDFT",
               department: "HR"
              },
  	         {
               ID: "3",
               metricList: [{"Value":0.003,"Stat":{"parameter":0,"Name":"test0","Tag":"Devo100"}},
                             {"Value":0.004,"Stat":{"parameter":0,"Name":"test1","Tag":"Devo101"}}],                  
               company: "MSDFT",
               department: "Development"
              },
  	          {
               ID: "4",
               metricList: [{"Value":0.1,"Stat":{"parameter":0,"Name":"test2","Tag":"Devo102"}},
                             {"Value":0.25,"Stat":{"parameter":0,"Name":"test1","Tag":"Devo101"}}],                  
               company: "MSDFT",
               department: "Finance"
              },
  	          {
               ID: "5",
               metricList: [{"Value":0.233,"Stat":{"parameter":0,"Name":"test0","Tag":"Devo100"}}],                  
               company: "MSDFT",
               department: "Accounts"
              }
				
			);		
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
    <div ng-repeat="p in profileData">
		<div>{{p.company}}</div> 
		<div>{{p.department}}</div>
		
		<div ng-repeat="emp in p.metricList">
		
			<div ng-if="emp.Stat.Tag == 'Devo100'">
			  Devo100 if condition
			</div>
			
			<div ng-if="emp.Stat.Tag != 'Devo100'">
			  
			  Devo100 else condition
			  
			</div>
			
		
			
			
			<div ng-if="emp.Stat.Tag == 'Devo101'">
			  Devo101 if condition
			</div>
			<div ng-if="emp.Stat.Tag != 'Devo101'">
			  Devo101 else condition
			  
			</div>
			
		
			
			<div ng-if="emp.Stat.Tag == 'Devo102'">
			  Devo102 if condition
			</div>
			<div ng-if="emp.Stat.Tag != 'Devo102'">
			  Devo102 else condition
			</div>
			
			
				<hr>
			
	    </div>
	    </div>

＆＃13;

ng-if（尝试实现if-else）

2 个答案: