Question

我想更改p元素的内容：

<ion-view>
  <ion-content>
    <div class="list card">
      <div class="item item-avatar">
        <h4>{{name}}</h4>
      </div>
      <div class="item item-body">
        <p id='output1'>
          <h4>welcome to ionic</h4>
          x
        </p>
      </div>

所以我试试这个javascript代码：

      <script type="text/javascript">
        var output1 = document.getElementById('output1');
        output1.innerHTML = data[id].when;
      </script>
    </div>
  </ion-content>
</ion-view>

Answer 1

当我在Chrome中试用它时，它在某种程度上起了作用。但正如下面的链接问题所指出的，浏览器之间的行为可能不同。这是我渲染的html：

<div class="item item-body">
  <p id="output1">data[id].when</p>
  <h4>welcome to ionic</h4>
  x
  <p></p>
</div>

如您所见，您的output1 p分为两部分。如果您在h4元素中使用p之类的元素，则会发生这种情况。标题将段落分为：p，h4，x和另一个p。第一个p是你定义的那个，它的内部html被正确替换（好吧，它最初是空的，所以它只是被添加）。结果是，您只需添加内部html而不是替换。

为了解决此问题，您可以使用display: inline-block或（更好）将p替换为更合适的元素。

请阅读这些问题以获取更多信息：

How to use an <h2> tag </h2> inside a <p></p> in the middle of a text?

Nesting block level elements inside the <p> tag... right or wrong?

Answer 2

你可以试试这个

 <ion-view>
  <ion-content>
    <div class="list card">
      <div class="item item-avatar">
         <h4>{{name}}</h4>
      </div>
      <div class="item item-body">
       <p ng-bind-html="Mycontent">
       </p>
   </div> 
 </ion-content>

控制器中的

$scope.Mycontent="<h4>welcome to ionic</h4> x";

这会将所有html代码原样打印到p标签中。

最后你的javascript代码就像那样

  app.controller('myCtrl', function($scope) {
     $scope.Mycontent=data[id].when;
  });

我想通过使用javascript代码更改<p> </p>元素的内容，但它已经工作

2 个答案: