Question

我有2个HTML页面。在我的index.html页面中，您可以看到来自JSON文件的产品信息。当人们点击特定产品时，我需要在detail.html页面中有详细的产品。警报可以显示详细信息，但不幸的是我的<p>的innerHTML没有变化，请指导我。

  <div ng-app="myApp" ng-controller="AppController">
<div id="serachWrapper">
  <h1 id="headerTopic">Our Products</h1>
  <input id="searchInput" name="search" type="text" placeholder="Search products" ng-model="searchquery"/>
  <table id="searchTable">
    <thead id="tbHead">
      <tr class="tbRow">
        <th class="tbTopics">ID</th>
        <th class="tbTopics">Name</th>
        <th class="tbTopics">Color</th>
        <th class="tbTopics">Type</th>
        <th class="tbTopics">Capacity</th>
        <th class="tbTopics">Price</th>
      </tr>
    </thead>
    <tbody id="tbBody">
      <tr class="tbRow" ng-repeat="x in myData | filter:searchquery ">
        <td class="tbcontents" ><a href="detail.html" ng-click="go(x)">{{x.id}}</a></td>
        <td class="tbcontents"><a href="detail.html" ng-click="go(x)">{{x.name}}</a></td>
        <td class="tbcontents"><a href="detail.html" ng-click="go(x)">{{x.color}}</a></td>
        <td class="tbcontents"><a href="detail.html" ng-click="go(x)">{{x.type}}</a></td>
        <td class="tbcontents"><a href="detail.html" ng-click="go(x)">{{x.capacity}}</a></td>
        <td class="tbcontents"><a href="detail.html" ng-click="go(x)">{{x.price}}</a></td>
      </tr>
    </tbody>
  </table>
</div>

这是我的Angular js代码：

  var app = angular.module('myApp', ['ngSanitize']);
  app.controller('AppController', AppController);

  function AppController($scope , $http) {
   $http.get("products.json").success(function(myData){
       $scope.myData = myData;

       $scope.go = function(item){
           var detail = item.detail;
           var productDetail = angular.element(document.getElementById('product-detail')).html();
           productDetail = detail;
           alert(detail)
           };
     });
  }

Answer 1

您可以将两个代码保留在页面中，并使用 ng-if 指令解决此问题

Angular ng-if directive

<body ng-app="ngAnimate">
  <label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
  <span ng-if="checked" class="animate-if">
   This is removed when the checkbox is unchecked.
  </span>
</body>

Answer 2

为什么在http.get请求中定义了$ scope.go函数？

尝试：

function AppController($scope , $http) {

    $http.get("products.json").success(function(myData){
       $scope.myData = myData;
     });

    $scope.go = function(item) {
        var detail = item.detail;
        var productDetail = angular.element(document.getElementById('product-detail')).html();
        productDetail = detail;
        alert(detail)
     };
}

如何在角度js的范围函数内用变量更改div的innerHTML？

2 个答案: