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

How to display the selected items in the new page?

本文关键字：选项 项目 显示 新页面      更新时间：2023-09-26

每当我点击查看时，这些项目都在同一页面上被选中。我需要在新页面上显示它们，但是我不能这样做。

<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>

功能:

<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>

您可以使用两个选项将所选用户存储到localstorage或其他地方并在details视图中读取，如

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

并检索detail视图，如

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

或

我宁愿使用父子关系在这个假设你有一个父控制器名为'CountryCtrl'和两个子控制器'CountryListCtrl'和'CountryDetailCtrl'。列表页面绑定到'CountryListCtrl'，细节视图绑定到'CountryDetailCtrl'，在顶部你有'CountryCtrl'。你可以使用ng-include等来改变你的视图。当从列表移动到细节控制器时，在父控制器上设置一个对象，它将被两个控制器访问。在angularjs中，你可以在网上学习父级和子级关系，有很多相关的文章。

谢谢。

要在新选项卡中显示所选项的详细信息，有多种方法可以实现这一点。一种方法是添加带有属性target="_blank"的表单(在新选项卡中打开action属性)，并在select()函数中提交它。

所以你可以添加一个表单，像这样: 
<form id="openNewTabForm" target="_blank" method="GET"></form>

然后更新函数以提交表单。有多种方法可以传递关于选定手机的数据——例如，将数据存储在表单字段中，序列化数据并将其存储在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;
}
然后创建一个新页面(例如selectedPhone.html)，该页面接受表单提交的值。这可能是一个服务器端页面(例如与PHP, Ruby等)，在这种情况下，你会设置属性method="POST"的形式。或者您可以使用常规的HTML页面并处理查询字符串。你也可以使用AngularJS + UI Router, VueJS等在加载后修改URL。

看看我做的这个普朗克的例子。我将包括一个代码片段，将在这里运行，但SO不允许(目前)有一个表单提交打开一个新的选项卡，因为它是沙盒。

另一种方法可能是使用window.open()来打开一个新的浏览器窗口，但这可能会导致某些用户的弹出窗口拦截器出现问题。

您可以在点击按钮功能时打开新模式，如下-

在控制器:

 $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();
            });
    }
HTML: 

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

通过使用new modal (screen)，你可以按照自己的要求进行设计。

相关文章：