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

Question

我有一个简单的形式，其中我显示简单的文本，带有勾号的相同文本，并根据ng-if条件隐藏相同的文本。我想做出一个指令，但我不知道怎么做。我做了简单的指令，但这个似乎很复杂。

这是我的网页

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

任何建议如何实现相同的功能？

Answer 1

只需划分业务逻辑和表示逻辑即可。

在控制器中：

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

但它将是多余的，在某些情况下可能会让您跳过其中一个等式。