如何为许多ng-if条件编写指令？

我有一个简单的表单，其中显示简单的文本，同一文本带有刻度并基于ng-if条件隐藏相同的文本。我想做一个指令，但我不知道如何。我做了简单的指令，但这个看起来很复杂。如何为许多ng-if条件编写指令？

这里是我的HTML

<ul class="list-unstyled carsure-listing-detail"> 
    <li ng-if="!button_clicked && !checkboxModel.value1"><input type="checkbox" ng-model="checkboxModel.value1"> Right B Pillar is Non-Accidented</li>      
    <li ng-if="button_clicked && checkboxModel.value1"><i class="fa fa-check"></i>Right B Pillar is Non-Accidented</li> 
    <li ng-if="!button_clicked && checkboxModel.value1"><input type="checkbox" ng-model="checkboxModel.value1"> Right B Pillar is Non-Accidented</li> 
</ul>

这里是我的控制器

var mainControllers = angular.module('mainControllers', []); 
mainControllers.controller('StarterController', ['$scope', '$routeParams', function ($scope, $routeParams) { 
    $scope.checkboxModel = {}; 
    $scope.button_clicked = false; 

    console.log($scope.button_clicked); 
    $scope.checksubmit = function() { 
     $scope.button_clicked = true; 

    } 

}]);

任何建议，我怎么能做到这一点相同的功能？

来源

2017-08-21 Usman Iqbal

传递一个返回布尔值的回调函数。这样，你会保持你的视图干净，并使其通用。 – Rajesh

如果第一个和第三个选项是相同的，你可以将它们组合在同一行：ng-if =“！button_clicked” – obey

第一个和第三个选项不一样仔细检查 –

只分业务逻辑和表示逻辑。

在控制器：

$scope.firstItemIsVisible = !button_clicked 
    && ...(you can put more options here)... 
    && !checkboxModel.value1; 
$scope.secondItemIsVisible = button_clicked 
    && checkboxModel.value1

上查看：

<li ng-if="firstItemIsVisible"> 
    <input type="checkbox" ng-model="checkboxModel.value1"> 
     Right B Pillar is Non-Accidented 
</li>      
<li ng-if="secondItemIsVisible"> 
    <i class="fa fa-check"></i> 
    Right B Pillar is Non-Accidented 
</li>

一个指令可能的情况会是这样的：

<li put-if1="!button_clicked" 
    put-if2="!checkboxModel.value1"> 
    ... 
</li>

但是，这将是多余的，可以让你在某些情况下跳过其中一个方程。

来源

2017-08-21 12:47:23 Maxwellt

我不想要一个NGIF我想要一个指令 –

如何为许多ng-if条件编写指令？

回答

相关问题