Fatal编程技术网
  • javascript/
  • Javascript 如何使用angularjs持久化打开的div框

Javascript 如何使用angularjs持久化打开的div框

javascript angularjs

Javascript 如何使用angularjs持久化打开的div框,javascript,angularjs,popup,local-storage,Javascript,Angularjs,Popup,Local Storage,下面的代码非常有效。它可以打开和关闭弹出消息框 现在，我想确保任何打开的弹出框都会根据其Id在页面刷新时保持不变。我想这是localstorage的工作 在jquery中，我可以使用下面的代码来完成 <!doctype html> <html> <head> <title></title> <style> .contact_box { bottom: -5px; height:200px

下面的代码非常有效。它可以打开和关闭弹出消息框

现在，我想确保任何打开的弹出框都会根据其Id在页面刷新时保持不变。我想这是localstorage的工作

在jquery中，我可以使用下面的代码来完成

<!doctype html>
 <html>
    <head>
        <title></title>

<style>
.contact_box {
  bottom: -5px;
   height:200px;
  background: black;
  color: red;
  border-radius: 5px 5px 0px 0px;
  display: inline-block;
position: fixed;
  width: 500px;
bottom: 0%
}
</style>
<script src='jquery-3.1.1.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
    var persist = localStorage.getItem('persist');
    if(persist === 'true'){
        $('#mydiv').show();
    }

    $("#display").click(function(event){
        event.preventDefault();
        $('#mydiv').show();
        localStorage.setItem('persist', 'true');
    });

 $("#close").click(function(event){
        event.preventDefault();
        localStorage.removeItem('persist', 'false');
         $('#mydiv').hide();
    }); 

});
</script>

<div id="mydiv" class="contact_box" style="display:none;" >

      <br> Message ....</br>
<br> Message ....</br>
<br> Message ....</br>
<br> Message ....</br>
<br> Message ....</br>
<br> Message ....</br>

</div>
<h1>Refresh Page after you click on persist button</h1>
    <input type="button" value="Persist" id="display"/>
   <input type="button" value="close" id="close"/>



</body>

</html>
下面是Angularjs代码，它显示了各种用户的弹出框

从stackOverflow运行此处的代码段时，从“窗口”读取“localStorage”属性时将出现错误：文档已沙盒，并且缺少“允许相同来源”标志

在你的本地电脑上运行，在那里应该可以正常运行

var-app=angular.module'myapp'，[]； 应用程序控制器'MainCtrl'，函数$scope{ //流行歌手 $scope.popIt=functionid{ 如果$scope.arr[id].popStatus==true{ $scope.arr[id].popStatus=false }否则{ $scope.arr[id].popStatus=true； } console.log$scope.arr； $scope.updateLocalStorage； } //隐藏消息框 $scope.hideUnhideIt=functionid{ $scope.arr[id]。hideBox==true？$scope.arr[id]。hideBox=false:$scope.arr[id]。hideBox=true； $scope.updateLocalStorage； } //在初始化时调用，如果存在数组，则从本地存储读取 $scope.checkAndInitiateFromLocalStorage=函数{ var readArrayStr=localStorage.getItem'MessaginArray'； 如果readArrayStr&&readArrayStr.length>0{ $scope.arr=JSON.parsereadArrayStr； }否则{ $scope.arr=[{ 姓名：user1， popStatus:false， 墨守成规：错误 }, { 姓名:user2,， popStatus:false， 墨守成规：错误 }, { 姓名:user3,， popStatus:false， 墨守成规：错误 }, { 姓名：user4， popStatus:false， 墨守成规：错误 } ]; } } //在每次更新时调用，将最新状态存储在localstorage中 $scope.updateLocalStorage=函数{ setItem'MessaginArray'，JSON.stringify$scope.arr； /*console.logupdated本地存储*/ } $scope.checkAndInitiateFromLocalStorage； }; .侧边栏{ 宽度：20%； 位置：固定； 身高：100%； 右：0px； 顶部：0px； 填充顶部：50px； 垫底：10px； 边框：1px实心B2B2； 文本对齐：底部对齐； } .主要地区{ 位置：固定； 宽度：80%； 底部：0% } .联络电话亭{ 位置：相对位置； 底部：-5px； 宽度：250px； 背景：黑色； 颜色：红色； 边界半径：5px 5px 0px 0px； 底部：0px； 显示：内联块； } {{ret.name} 关 隐藏/取消隐藏 用户名：{{ret.name} 消息 消息 消息 消息 消息 消息 
// Persist any opened message box Div after page refresh using local storage

  $scope.persistDiv = localStorage.getItem($scope.arr);
   $scope.persistIt = function(id) {
    if ($scope.arr[id].popStatus == true) {
      $scope.arr[id].popStatus = false;

// set Local Storage for any open popup box via Id
localStorage.setItem(persistDiv);
    } else {
      $scope.arr[id].popStatus = true;

//remove local storage when a particular popup box is close 
localStorage.removeItem(persistDiv);
    }
  }

<!doctype html>
 <html ng-app="myapp">
    <head>
        <title></title>

<style>

.sidebar {
  width: 20%;
  position: fixed;
  height: 100%;
  right: 0px;
  top: 0px;
  padding-top: 50px;
  padding-bottom: 10px;
  border: 1px solid #b2b2b2;
  text-align: bottom;
}

.mainArea {
  position: fixed;
  width: 80%;
  bottom: 0%
}

.contact_box {
  position: relative;
  bottom: -5px;
  width: 250px;
  // height:auto;
  background: black;
  color: red;
  border-radius: 5px 5px 0px 0px;
  bottom: 0px;
  //right: 270px;
  display: inline-block;
}

</style>
  <script src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {


  $scope.arr = [
    {      name: "user1",      popStatus: false,      hideBox: false    },
    {      name: "user2",      popStatus: false,      hideBox: false    },
    {      name: "user3",      popStatus: false,      hideBox: false    },
    {      name: "user4",      popStatus: false,      hideBox: false    }
  ];


  //pop div
  $scope.popIt = function(id) {
    if ($scope.arr[id].popStatus == true) {
      $scope.arr[id].popStatus = false
    } else {
      $scope.arr[id].popStatus = true;
    }
  }

  //hideUnhide message box
  $scope.hideUnhideIt = function(id) {
    ($scope.arr[id].hideBox == true) ? $scope.arr[id].hideBox = false: $scope.arr[id].hideBox = true;
  }

});


</script>
    </head>
<body>

<div ng-app="myapp" ng-controller="MainCtrl">

  <div class="sidebar">
    <ul>
      <li ng-repeat='ret in arr track by $index'>
        <div ng-click="popIt($index)">
          {{ret.name}}
          <!--           hide:{{ret.hideBox}}          -->
          <br><br>
        </div>
      </li>
    </ul>
  </div>

  <div class='mainArea'>
    <ng-controller ng-repeat='ret in arr track by $index'>
      <div ng-if="ret.popStatus == true" class="contact_box">
        <button style="float:right" ng-click="popIt($index)">Close</button>
        <button style="float:left" ng-click="hideUnhideIt($parent.$index)">hide/unhide</button>
        <br>
        <div ng-if="!ret.hideBox" style="height:auto;">

          <b>Username:</b> {{ret.name}}
          <br>Message .........<br>
          <br>Message .........<br>
          <br>Message .........<br>
          <br>Message .........<br>
          <br>Message .........<br>
          <br>Message .........<br>
        </div>
      </div>
    </ng-controller>
  </div>
</div>



</body>



</html>