如何在angular js的范围函数内用变量更改div的innerHTML？答案

【问题标题】：How can I change the innerHTML of div with a variable, inside the scope function in angular js?如何在angular js的范围函数内用变量更改div的innerHTML？
【发布时间】：2016-05-19 02:57:50
【问题描述】：

我有 2 个 HTML 页面。在我的 index.html 页面中，您可以看到来自 JSON 文件的产品信息。当人们点击特定产品时，我需要在 detail.html 页面中有产品的详细信息。 Alert 可以显示细节但是很遗憾我的<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)
           };
     });
  }

【问题讨论】：

在我的 detail.html 页面中，我只有一个
标签。

我们应该在这里看到详细信息

标签： javascript jquery html angularjs json

【解决方案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>

【讨论】：

【解决方案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)
     };
}

【讨论】：

我将 $scope.go 函数移到了 http.get 之外，但问题仍然存在。