如何在新页面中显示所选项目？

Question

Whenever I click on view the items are selected on same page. 每当我点击视图时，都会在同一页面上选择项目。 I need to display them on the new page, but I am not able to do that. 我需要在新页面上显示它们，但我无法做到这一点。

<html ng-app="countryApp">
<body ng-controller="CountryCtrl">
  <div ng-repeat="x in models track by $index">
    <button ng-click="select(x, $index)">View Me</button>
  </div>

  Selected Model:

    <p> {{selected.name}} </p>
    <p> {{selected.brand}} </p>
    <p> {{selected.price}} </p>
    <p> {{selected.quan}} </p>
    <p> {{selected.sku}} </p>

</body>

Function: 功能：

<script>
  var countryApp = angular.module('countryApp', []);
  countryApp.controller('CountryCtrl', function ($scope){
    $scope.select = function(brand) {
    $scope.selected = brand;
    }
    $scope.models = [
    { brand: "Brand: Apple", id: 980190962, name: "Name: iPhone 5", price: "Price: $199", quan: "Quantity: 1", sku: "SKU:1234" }, 
    { brand: "Brand: Samsung", id: 298486374, name: "Name: Galaxy S3", price: "Price: $199", quan: "Quantity: 2", sku: "SKU:5678"}
    ]
    });

</script>
</html>

Answer 1

You can open new modal on click of button function like following - 您可以点击按钮功能打开新模态，如下所示 -

In controller: 在控制器中：

 $scope.showDetails = function(){
       // open new html modal to show new screen using following
       $ionicModal.fromTemplateUrl('templates/views/details.html',{
                scope: $scope,
                animation: 'none',
                backdropClickToClose: false
            }).then(function(modal){
                $scope.modal= modal;
                $scope.modal.show();
            });
    }

In HTML: 在HTML中：

<div ng-repeat="x in models track by $index">
    <button ng-click="showDetails (x, $index)">View Me</button>
</div>

By using new modal (screen) you can design as you required as well. 通过使用新的模态（屏幕），您也可以根据需要进行设计。

Answer 2

You can use two options either store that selected user to localstorage or somewhere and read that in details view like 您可以使用两个选项将选定的用户存储到localstorage或某处，并在详细信息视图中读取

localStorage.setItem('myObj',JSON.stringify(brand));

and retrieve that in details view like 并在详细信息视图中检索

JSON.parse(localStorage.getItem('myObj'));

OR 要么

I will prefare to use parent child relationship in this suppose you have a parent controller named ' CountryCtrl ' and two child controllers ' CountryListCtrl ' and ' CountryDetailCtrl '. 假设您有一个名为“ CountryCtrl ”的父控制器和两个子控制器“ CountryListCtrl ”和“ CountryDetailCtrl ”，我将使用父子关系。 List page is bind to 'CountryListCtrl' and details view is bind to ' CountryDetailCtrl ' and on top you have ' CountryCtrl '. 列表页面绑定到'CountryListCtrl'，详细信息视图绑定到' CountryDetailCtrl '，最上面你有' CountryCtrl '。 You can change your view using ng-include etc. When moving from List to Detail Controller set an object on parent controller and it will be accessible to both Controllers. 您可以使用ng-include等更改视图。从列表移动到详细控制器时，在父控制器上设置一个对象，两个控制器都可以访问它。 You can learn about parent and child relationship in angularjs on internet there are tons of article available. 您可以在互联网上的angularjs中了解父母与子女的关系，有大量文章可供使用。

Thanks. 谢谢。

Answer 3

To show the details of the selected item in a new tab, there are multiple ways to achieve this. 要在新选项卡中显示所选项目的详细信息，有多种方法可以实现此目的。 One way is to add a form with attribute target="_blank" (to open the action attribute in a new tab) and submit it in the select() function. 一种方法是添加一个带有属性target="_blank"的表单（在新选项卡中打开action属性）并在select()函数中提交它。

So you can add a form, like this: 所以你可以添加一个表单，如下所示：

<form id="openNewTabForm" target="_blank" method="GET"></form>

Then update the function to submit the form. 然后更新函数以提交表单。 There are multiple ways to pass the data about the selected phone - eg store the data in form fields, serialize the data and store it in a cookie, in localStorage, etc. Here is an example using hidden form fields: 有多种方法可以传递有关所选手机的数据 - 例如，将数据存储在表单字段中，序列化数据并将其存储在cookie中，localStorage中等。以下是使用隐藏表单字段的示例：

$scope.select = function(phone) {
    var form = document.getElementById('openNewTabForm');
    form.action = action="selectedPhone.html";
    Object.keys(phone).forEach(function(field,index) {
      var input = form.elements[field]; //look for an existing form field for this field
      if (input) { //update existing form field
        input.value = phone[field];
      }
      else { //create a new form field for this 
        input = document.createElement('input');
        input.type = 'hidden';
        input.name = field;
        input.value = phone[field];
        form.appendChild(input);
      }
    });
    form.submit();
    $scope.selected = phone;
}

Then have a new page (eg selectedPhone.html ) that takes the values submitted with the form. 然后有一个新页面（例如selectedPhone.html ），它接受随表单提交的值。 This could be a server-side page (eg with PHP, Ruby, etc), in which case you would set the attribute method="POST" on the form. 这可能是服务器端页面（例如PHP，Ruby等），在这种情况下，您可以在表单上设置属性method="POST" 。 Or you can just use a regular HTML page and process the query string. 或者您可以使用常规HTML页面并处理查询字符串。 You could also use AngularJS + UI Router , VueJS, etc. to modify the URL after it has been loaded. 您还可以使用AngularJS + UI路由器，VueJS等在加载后修改URL。

Take a look at this Plunker example I made for an example. 看一下我为示例制作的这个Plunker示例。 I would have included a code snippet that would run here but SO doesn't (currently) allow having a form submission open a new tab because it is sand-boxed. 我会包含一个可以在这里运行的代码片段但是（当前）不允许表单提交打开一个新选项卡，因为它是沙盒。

Another approach might be to use window.open() for opening a new browser window but that might lead to issues with popup blockers for some users. 另一种方法可能是使用window.open（）来打开新的浏览器窗口，但这可能会导致某些用户的弹出窗口阻止程序出现问题。

如何在新页面中显示所选项目？

问题描述

3 个解决方案

解决方案1
0 2016-11-10 06:57:38

解决方案2
0 2016-11-10 08:54:29

解决方案3
0 2016-11-11 15:30:32

如何在新页面中显示所选项目？

问题描述

3 个解决方案

解决方案1 0 2016-11-10 06:57:38

解决方案2 0 2016-11-10 08:54:29

解决方案3 0 2016-11-11 15:30:32

解决方案1
0 2016-11-10 06:57:38

解决方案2
0 2016-11-10 08:54:29

解决方案3
0 2016-11-11 15:30:32