在其他页面上显示div angularjs

时间:2017-01-08 11:05:30

标签: javascript html css angularjs

如果用户点击按钮,我在印度有一个包含房产信息的div

页面应该重定向到另一个页面,我的整个div应该是复制

并在另一页上打开

<div class="box2">
                    <div style="">
                        <img src="2.jpg" style="border: 2px solid #EEEEEE; height: 180px;" class="col-lg-6 col-md-6 col-sm-12 col-xs-12" />
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 select">
                        <div class="borderdiv">
                            <span ng-repeat="i in data2" style="font-size:16px; font-weight:bold">{{i.A}}</span>
                        </div>
                        <div class="borderdiv">
                            <span ng-repeat="i in data2" style="font-size:12px; font-weight:lighter">Available For <b>{{i.B}}</b> </span>
                        </div>
                        <div class="borderdiv">
                            <span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">Area <b>{{i.C}}</b> Security <b> Rs. {{i.F}}</b></span>
                        </div>
                        <div class="borderdiv">
                            <span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">Rental Unit In<b style="cursor:pointer"> {{i.D}}</b></span>
                        </div>
                        <br />
                        <div class="borderdiv">
                            <span ng-repeat="i in data" style="font-size:14px; font-weight:normal">
                                Features
                                <br />
                                <span class="glyphicon glyphicon-eject" style="margin-left:20px;"></span>
                                <span class="glyphicon glyphicon-chevron-left" style="margin-left:20px;"></span>
                                <span class="glyphicon glyphicon-chevron-right" style="margin-left:20px;"></span>
                            </span>
                        </div>
                        <br />
                        <div class="borderdiv">
                            <span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">{{i.E}}</span>
                        </div>
                    </div>
                </div>

这是我的div

<button ng-click="click()">click to view data</button>

这是我的按钮

如果我想在其他页面上看到相同的数据,我需要做什么?

3 个答案:

答案 0 :(得分:0)

您需要创建一个服务器端结构模板,该模板将生成div。 PHP中的示例

function getViewData() {
    ?>
    <button ng-click="click()">click to view data</button>
    >?php
}

如果您使用的是这样的PHP文件,则可以在结构中的任何位置添加:

<?php getViewData(); ?>

答案 1 :(得分:0)

我建议您使用角度工厂,其中包含您要查找的数据,并在相应页面中使用html模板。

按钮代码与

保持一致
<button ng-click="click()">click to view data</button>

创建一个新的Angular Factory,如下所示

angular.module('myApp').factory('appVariables',function(){
        var data2=[];
        return{
                data2,data2
        }
});

您的控制器应包含以下 click()方法

angular.module('myApp').controller('appController',function($scope,appVariables){

        $scope.click=function(){
            appVariables.data2=$scope.data2;
        }
})

转到另一个页面,将 appVariables 作为依赖性注入控制器,您可以在应用中获得相同的数据。

此代码属于genric,因为您提供的信息非常少。

答案 2 :(得分:0)

我为你准备了一个样品。我无法创建多个html页面。所以你必须将它们放在不同的文件中。

var app = angular.module('sample', []);]
//JS1
app.controller('page1Controller', ['$scope','$http','$rootScope', function($scope, $http){
  
  $scope.page1 = {};
  $scope.page1.title  = "Page1";
  
  $scope.click = function(page){
    $rootScope.page = page;
  }
  
}]);


//JS2
app.controller('page2Controller', ['$scope','$http','$rootScope', function($scope, $http){
  
  $scope.init = function(){
    alert("alrt")
    $scope.page2 = $rootScope.page;
  }
 
  
}]);
<div ng-app="sample">
  
  <!--Page1-->
  <div ng-controller="page1Controller">
    
    <div>{{page1.title}}</div>
   <button ng-click="click(page1)">click to view data</button>
</div>
  
  <!--Page2-->
  <div ng-app="sample">
   <div ng-controller="page2Controller" ng-init="init()">
    
    <div>{{page2.title}}</div>
   
</div>