Question

我的index.html页面如下所示：

<div id="sidepanel" data-ng-controller="ListCtrl">
    <li data-ng-repeat="record in records">
    {{record.id}}
    <input type="checkbox" data-ng-model="addwidget">
    </li>
</div>
<div id="main">
    <div data-ng-view></div>
</div>

对于这个数据-ng-view，我有另一个页面recordlist.html，我有以下代码：

<div data-ng-controller="ListCtrl">
    <ul class="design">
        <li data-ng-repeat="record in records"> 
           <div data-ng-switch data-on="record.category">
        <div data-ng-switch-when="reporting1">
             <div id="{{record.id}}" data-ng-show="addwidget">{{record.description}}</div> 
             </div>               
             <div data-ng-switch-when="reporting2">                
             <div id="{{record.id}}" data-ng-hide="addwidget">{{record.description}}</div>
             </div>
        </li>
    </ul>
</div>

我的问题是，当我选中复选框时，我想显示第一个div。当我取消选中它时，我想显示第二个div。当两个数据-ng-model＆amp; data-ng-hide / show在同一页面然后它工作正常但在我的情况下它出现在两个不同的页面上。

这是对的吗？我该如何实现呢。需要帮助。谢谢。

Answer 1

问题是您在第一个控制器中设置addwidget，但是在第二个控制器中尝试使用它。控制器不是单身人士。

所以，在这种情况下：

<div id="sidepanel" data-ng-controller="ListCtrl">
  ...
</div>
<div id="main">
  <div data-ng-view>
    <div data-ng-controller="ListCtrl">
    </div>
  </div>
</div>

你有两个独立的控制器和范围。并且您在第一次尝试阅读时设置addwidget。

您可以将其绑定到根作用域$root.addwidget，也可以将服务共享用于状态。

由于你有很多记录，直接绑定到root是一个问题，因为它们都将共享相同的状态。因此，您需要rootScope中的对象并通过id $root.addwidget[record.id]绑定该选项。制作了一个非常简化的modification here。

AngularJS：data-ng-model＆amp;数据-NG-隐藏/显示

1 个答案: