11

11

by Fed json

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="showSecondDialog">
        你真的要删除吗？
        <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.showSecondDialog = true
    }
    $scope.ensureAgain = function() {
        $scope.showFirstDialog = false
        $scope.showSecondDialog = false
        $scope.showDeleteBtn = false
        $scope.title = "好吧， 删了"
    }
    
})