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

【问题标题】：ng-if (trying to implement if-else)ng-if（尝试实现 if-else）
【发布时间】：2017-04-05 06:39:33
【问题描述】：

如果我错了，请纠正我，我对 ng-if 指令的理解就像使用多个 ng-if 指令时的 if 和 else 条件。所以在我的代码中，我试图显示三个 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>

我的插件代码网址

http://plnkr.co/edit/cfkJBD6ZIHYGCzKP4BtY

【问题讨论】：

我们如何区分三种可能的else 条件？如果某物不等于一个值，它可能是任何其他值，对吧？你想渲染多少个实际的 div？
您的代码完全符合您的描述。基本上每次迭代中有三个“if-else”块。他们都没有（基于您的 Plunkr）得到emp.Stat.Tag == 'DevoXXX' 条件真实，这就是为什么您只看到“其他”条件的原因。也许你应该多解释一下你真正想做的事情。
ng-if 没有else。它只影响它所在的 HTML 元素，如果条件为真则渲染该元素，如果条件为假则不渲染该元素。每个ng-if 语句都是独立的。
请注意，对于您的示例数据，if 条件似乎都不成立。
如果条件没有问题。 HTML 似乎不正确。

标签： angularjs json angularjs-ng-repeat

【解决方案1】：

我已经修复了你的 plunkr 并创建了一个 fork：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 中已经提到的那样，该代码可能存在更多缺陷，例如使用== 而不是===。

【讨论】：

【解决方案2】：

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

根据 plnkr 的代码不正确： <div ng-repeat="emp in p.metricList"></div>

在这里，您将立即关闭ng-repeat div(loop)。

工作演示

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"
              }
				
			);		
    
});

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

【讨论】：

添加与我完全相同的答案有点奇怪，不是吗？ :P