Question

此控制台日志正常运行。如何获取html的这些数据。

ProductController.js

$scope.selectedProduct = function(product)
 {
    console.log(product.post_title);
    console.log(product.ID);
    console.log(product.post_date);
    console.log(product.post_author);
 }

ProductDetails.html

<ion-item class="item widget uib_w_109 d-margins item-button-left" data-uib="ionic/list_item_button" data-ver="0">
        Product Name : {{product.post_title}} <br>
            Product Id : {{product.ID}}<br>
</ion-item>

Answer 1

您需要分配到$ scope变量

$scope.selectedProduct = function(product)
 {
    $scope.product.post_title = product.post_title;
    $scope.product.ID = product.ID;
    ........
 }

如果你想把它推到一个数组，

$scope.products =[];
$scope.products.push($scope.product);

Answer 2

将这些值分配到范围变量中，然后尝试在HTML中调用这些范围变量。

Answer 3

只需将作为参数传递的产品设置为范围变量，然后在HTML中绑定或使用范围变量。

这是一个工作的掠夺者：https://plnkr.co/edit/caqLK8oOIukeNuPQed3h?p=preview

  $scope.product = {};
  $scope.selectedProduct = function(product) {
    $scope.product.post_title = product.post_title;
    $scope.product.ID = product.ID;
    $scope.product.post_date = product.post_date;
    $scopee.product.post_author = product.post_author;

  };

在Plunker按钮中的

从服务器获取产品并调用函数来设置产品。因为plunker没有服务器请求，所以要提取的产品是静态定义的。

Answer 4

这样做......

$scope.product{

}

$scope.selectedProduct = function(product)
{
    $scope.product.post_title = product.post_title;
    $scope.product.ID = product.ID;
    $scope.product.post_date = product.post_date;
     $scopee.product.post_author =product.post_author;
}

或者你可以简单地做......

$scope.product{

}

$scope.selectedProduct = function(product)
 {
    $scope.product = product;
 }

Answer 5

您必须将值存储在$ scope变量中，并且还需要在父元素中提及ng-controller属性。这是一个完整的代码，带有示例

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="app1">
	<div ng-controller="ctrl1">
		Employee Info<br/>
		<strong>Id:</strong> {{employeeId}}<br/>
		<strong>Name:</strong> {{employeeName}}
	</div>
</div>

<script>
var app = angular.module('app1', []);
app.controller('ctrl1', function($scope) {
    $scope.employeeId= "E001";
    $scope.employeeName= "John Doe";
});
</script>

＆＃13;

Answer 6

如果你只有一个值，那么你可以使用[0]镦粗来访问它，否则你可以使用ng-repeat来实现。

请检查以下代码。

＆＃13;

angular.module('appTest', [])
  .controller("repeatCtrl", function($scope) {
    $scope.items = [{
      Name: "Soap",
      Price: "25",
      Quantity: "10"
    }, {
      Name: "Bag",
      Price: "100",
      Quantity: "15"
    }, {
      Name: "Pen",
      Price: "15",
      Quantity: "13"
    }];
  
  $scope.result = {};
  $scope.selectProduct = function(product){
    $scope.result = product;
  };
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="appTest">
  <section ng-controller="repeatCtrl">
    <table>
      <thead>
        <tr ng-repeat="item in items | limitTo:1">
          <th ng-repeat="(key, val) in item">
            {{key}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in items">
          <td ng-repeat="(key, val) in item">
            <a href="#" ng-click="selectProduct(item)">{{val}}</a>
          </td>
        </tr>
      </tbody>
    </table>
    <br/>
    <div>
    Name : {{result.Name}} <br/>
    Price : {{result.Price}} <br/>
    Quantity : {{result.Quantity}}  
      
    </div>
  </section>
  
</body>

＆＃13;

Answer 7

首先声明'$ scope'变量：

$scope.product = {};

然后在你的fonction中为它指定一个值：

$scope.selectedProduct = function(product) {
    $scope.product.ID = product.ID;
   ... 
}

修改

此fiddle正在运行，您的代码有什么不同吗？

Answer 8

更改您的javascript和html代码，如下所示：

<强> JS

$scope.selectedProduct = function(product){
    return product;
}

<强> HTML

<ion-item class="item widget uib_w_109 d-margins item-button-left" data-uib="ionic/list_item_button" data-ver="0">
    Product Name : {{selectedProduct.post_title}} <br>
    Product Id : {{selectedProduct.ID}}<br>
</ion-item>

问候。

如何在angularjs

8 个答案: