如何在新頁面中顯示選定的項目？

每當我點擊查看在同一頁上選擇的項目。我需要在新的頁面上顯示它們，但我無法做到這一點。如何在新頁面中顯示選定的項目？

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

來源

2016-11-10 Vinit Mehta

@ppovoski我認爲vinith意味着新視圖 –

我刪除了我的意見，以防萬一你是正確的。 – ppovoski

@SaEChowdary yess它必須針對新的頁面..我的意思是應該在新的頁面上顯示選定的模型.. –

您可以在按鈕功能點擊打開新的模式像下面 -

在控制器：

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

通過使用新的模式（屏幕），您可以根據需要進行設計。

來源

2016-11-10 06:57:38

謝謝..我會檢查並回來給你.. –

working onit ..但我如何綁定我選擇的模型列表showdetails？/ –

它將採取默認情況下您選擇模式（只需訪問您的模式，如 - $ scope.modalName）。如果沒有可以使用通過工廠 –

您可以使用所選用戶的localStorage或某處兩種選項之一存儲和讀取，在詳細信息視圖像

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

和檢索的詳細信息視圖像

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

我會在此推薦使用父母子女關係假設你有一個名爲'CountryCtrl'和兩個子控制器'CountryListCtrl'和'CountryDetailCtrl'。列表頁面綁定到「CountryListCtrl」，詳細信息視圖綁定到'CountryDetailCtrl'，頂部有'CountryCtrl'。您可以使用ng-include等來更改您的視圖。從List移動到Detail Controller時，在父控制器上設置一個對象，並且兩個控制器都可以訪問它。你可以在互聯網上的angularjs中瞭解父母和孩子的關係，有大量的文章可用。

謝謝。

來源

2016-11-10 08:54:29

標記爲接受的回答讓設置方法，如果你覺得它有用 –

我有不到15個聲譽所以即使我標誌着這不會做出改變.. –

可能是在未來 –

要在新選項卡中顯示所選項目的詳細信息，有多種方法可以實現此目的。一種方法是添加一個表單，其屬性爲target="_blank"（在新標籤中打開動作屬性）並在select()函數中提交。

所以，你可以添加一個表單，像這樣：

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

然後更新提交表單的功能。有多種方式可以傳遞關於所選電話的數據 - 例如

$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：使用隱藏的表單字段存儲在表單字段中的數據，串行化數據，並將其存儲在cookie中，在本地存儲，等等。這裏是一個示例），它接受與表單一起提交的值。這可能是一個服務器端頁面（例如PHP，Ruby等），在這種情況下，您可以在窗體上設置屬性method="POST"。或者您可以使用常規的HTML頁面並處理查詢字符串。您也可以使用AngularJS + UI Router，VueJS等在加載後修改URL。

舉個例子，看看this Plunker example I made。我會包含一個可以在這裏運行的代碼片段，但是由於它是沙箱式的，因此SO不會（當前）允許表單提交打開一個新選項卡。

另一種方法可能是使用window.open()打開新的瀏覽器窗口，但這可能會導致某些用戶彈出窗口阻止程序出現問題。

來源

2016-11-11 15:30:32

如何在新頁面中顯示選定的項目？

回答

相關問題