如何爲許多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條件編寫指令？

回答

相關問題