如何根据范围变量的值在两个 div 之间切换？答案

【问题标题】：How can I switch between two div depending upon the value of a scope variable?如何根据范围变量的值在两个 div 之间切换？
【发布时间】：2023-03-17 08:03:02
【问题描述】：

我有一个问题，我想根据范围变量的值在两个 div 之间切换。范围变量在运行时更新，我希望我的视图在运行时更新。

问题是视图被加载了范围变量的初始值，并且范围变量的值在运行时被更改但视图不受影响。

这是一个示例代码：

HTML

<div **ng-if="pending=='done'"**> <!-- No Records Found -->
   <div>
        <center><h2> You have not any contacts yet. </h2>
   </div>
</div>                       
<div>
  <table **ng-if="pending=='not done'"**> 
    <thead>
      <tr>
          <th>ID</th>
          <th>Name</th>
          <th>E-mail</th>
          <th>Contact Number</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="(Id, value) in user.Count ng-if="value.status=='Approved'">
        <td> {{Id}} </td>
        <td> {{value.name}} </td>
        <td> {{value.email}} </td>
        <td> {{value.phone}} </td>
      </tr>
    </tbody>
  </table>
</div>
<div ng-init="changescopevalue()">
  changing scope now
</div>

控制器中的功能

$scope.pending = "done";

$scope.changescopevalue = function() {
  $scope.pending = "not done";
};

所以 [ng-if="pending=='done'"] 的 div 加载然后范围变量更改为 "not done" 但视图是不受影响。

请帮忙..

谢谢。

【问题讨论】：

您是否已经尝试过使用 ng-show="..." 或 ng-hide ？
您介意设置一个 plunker，以便我们可以使用您的示例吗？
是的，兄弟没用。

标签： angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

你应该避免ng-init。来自angular doc：

ngInit 的唯一适当用途是为 ngRepeat 的特殊属性设置别名，如下面的演示所示。除了这种情况，您应该使用控制器而不是 ngInit 来初始化作用域上的值。

您忘记关闭<center> 标签，但最好不要使用它，因为它已被弃用。改用css。另外，您的ng-repeat 值缺少引号"，应该是：

ng-repeat="(Id, value) in user.Count" ng-if="value.status=='Approved'"

除此之外，如果您正确设置了角度，您的 ng-if 基于范围变量 pending 的值运行良好：

Fiddle

【讨论】：