2017-08-21 1 views
0

J'ai un formulaire simple dans lequel je montre un texte simple, le même texte avec une Tick et de cacher le même texte basé sur les conditions ng-if. Je veux faire une directive mais je ne sais pas comment. J'ai fait des directives simples mais celle-ci me semble compliquée.Comment écrire une directive pour plusieurs condition ng-if?

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

ici est mon contrôleur

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; 

    } 

}]); 

Toute suggestion comment puis-je obtenir cette même fonctionnalité?

+1

Passez une fonction de rappel qui renvoie une valeur booléenne. De cette façon, vous garderez votre vue propre et la rendra générique. – Rajesh

+1

Si les 1ère et 3ème options sont les mêmes, vous pouvez les combiner dans la même ligne: ng-if = "! Button_clicked" – obey

+0

première et troisième options ne sont pas les mêmes vérifier attentivement –

Répondre

0

Juste diviser la logique métier et la logique de présentation.

Contrôleur:

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

Sur Vue:

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

Le cas possible d'une directive ressemblera:

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

Mais il sera redondant et peut vous faire sauter une des équations dans certains cas.

+0

je ne veux pas un ngif je veux une directive –