Question

我有一个简单的表单，我在其中显示简单的文本，带有Tick的相同文本，并根据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;

    }

}]);

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

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>

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

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

1 个答案: