JSFiddle - React, Tailwind, and code Playground

by krazy

HTML

<body ng-app='IfApp'>
    <div ng-controller="AppController">
        {{title}}
        <a href="#" ng-click="deleteThis()" ng-if="showDeleteBtn">删！</a>
        <div class="first-dialog dialog" ng-if="showFirstDialog">
            你确定要删除吗?
            <a href="#" ng-click="ensure()">确定啊</a>
        </div> 
        <div class="second-dialog dialog" ng-if="showSecDialog">
            你真的要删除吗?
            <a href="#" ng-click="ensureAgain()">真嗒</a>
        </div> 
    </div>
</body>

CSS

.dialog {
    border: 1px solid #ccc;
    width: 40%;
    height: 20px;
    margin: 0 auto;
}

JavaScript

angular.module("IfApp", [])
.controller("AppController", function($scope){
    $scope.title = "要删除，点右边 -> "
    $scope.showDeleteBtn = true
    $scope.deleteThis = function() {
        $scope.showFirstDialog = true
    }
    $scope.ensure = function() {
        $scope.showSecDialog = true
    }
    $scope.ensureAgain = function() {
        $scope.showFirstDialog = false
        $scope.showSecDialog = false
        $scope.showDeleteBtn = false
        $scope.title = "好吧， 删了"
    }
    
})