Question

每当我点击视图时，都会在同一页面上选择项目。我需要在新页面上显示它们，但我无法做到这一点。

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

Answer 1

您可以点击按钮功能打开新模态，如下所示 -

在控制器中：

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

通过使用新的模态（屏幕），您也可以根据需要进行设计。

Answer 2

您可以使用两个选项将选定的用户存储到localstorage或某处，并在详细信息视图中读取

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

并在详细信息视图中检索

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

OR

我假设你有一个名为＆＃39; CountryCtrl 的父控制器＆＃39;和两个子控制器＆＃39; CountryListCtrl ＆＃39;和＆＃39; CountryDetailCtrl ＆＃39;。列表页面绑定到＆＃39; CountryListCtrl＆＃39;并且详细信息视图绑定到＆＃39; CountryDetailCtrl ＆＃39;最重要的是你有＆＃39; CountryCtrl ＆＃39;。您可以使用ng-include等更改视图。从列表移动到详细控制器时，在父控制器上设置一个对象，两个控制器都可以访问它。您可以在互联网上了解angularjs中的父母和子女关系，有大量文章可供使用。

感谢。

Answer 3

要在新标签中显示所选项目的详细信息，有多种方法可以实现此目的。一种方法是添加包含属性target="_blank"的表单（在新标签中打开操作属性）并在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。

查看this Plunker example I made的示例。我会包含一个可以在这里运行的代码片段，但是SO（目前）不允许表单提交打开一个新选项卡，因为它是沙盒。

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

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

3 个答案: