ng-显示不在ng-repeat内更新

I have the following

我有以下内容

<table id="socialMediaContainer" class="socialMediaContainer" style="width: 100%;">
    <tbody>
        <tr ng-repeat="row in detailCollection.ChannelsInfo" 
            ng-controller="WhiteLabelSitesCtrl">
            <td><input id="txtSocialName" type="text" class="socialName"
                placeholder="Name" ng-disabled="ViewMode" maxlength="250"
                value="{{row.SocialChannelName}}" /> </td>
            <td><input id="txtSocialURL" type="text" class="txtLabel socialURL"
                placeholder="URL" ng-disabled="ViewMode" maxlength="250"
                value="{{row.SocialChannelURL}}" />
            </td>
            <td class="DragnDropIcon"></td>
            <td>
                <a class="orange " ng-show="ViewMode">Upload</a></td>
        </tr>                    
    </tbody>
</table>

and I have another button outside the ng-repeat that updates the ViewMode variable, but this is not working inside the ng-repeat neither for the ng-show not the ng-disabled. what am i missing here?

我在ng-repeat之外有另一个按钮来更新ViewMode变量，但是这对ng-repeat内部的ng-repeat也没有工作。我在这里失踪了什么？

4 个解决方案

#1

The problem seems to be, that you need to move ngController directive to the table level (at least): it can't be on the same element with ngRepeat if the later iterated over the array defined in controller.

问题似乎是，您需要将ngController指令移动到表级别（至少）：如果后者迭代在控制器中定义的数组，则它不能与ngRepeat在同一元素上。

<table ng-controller="WhiteLabelSitesCtrl" ... >
    <!-- ... -->
</table>

Demo: http://plnkr.co/edit/tu4TLmWIxdcYaiEd7whn?p=preview

演示：http：//plnkr.co/edit/tu4TLmWIxdcYaiEd7whn?p=preview

#2

ng-repeat creates a childscope for each item in the repeater.

ng-repeat为转发器中的每个项目创建一个childscope。

Thus viewmode will be a primitive value on that child scope and therefore as a primitive will lose inheritance binding with the parent scope.

因此，viewmode将是该子范围的原始值，因此原语将失去与父范围的继承绑定。

If you declare it as an object property in the controller scope however it will then be a reference to that parent object.

如果在控制器范围中将其声明为对象属性，则它将是对该父对象的引用。

$scope.mode ={ViewMode: false}

html example

HTML示例

<a class="orange " ng-show="mode.ViewMode">Upload</a></td>

#3

Try to pass object instead variable inside ng-repeat scope. Instead ViewMode, declare in your controller:

尝试在ng-repeat范围内传递object而不是变量。而不是ViewMode，在您的控制器中声明：

$scope.model = {};

$scope.model.ViewMode = false;`.

And your binding must be like this: <a class="orange " ng-show="model.ViewMode">. After that all be work fine.

你的绑定必须是这样的：。之后一切都很好。

Read this article to understand why it happens: https://github.com/angular/angular.js/wiki/Understanding-Scopes

阅读这篇文章，了解它为什么会发生：https：//github.com/angular/angular.js/wiki/Understanding-Scopes

#4

The button outside of the ng-repeat is not going to be nested in the same controller. The variable that it's modifying probably is not the same one that ViewMode under the WhiteLabelSitesCtrl is looking at.

ng-repeat外部的按钮不会嵌套在同一个控制器中。它正在修改的变量可能与WhiteLabelSitesCtrl下的ViewMode所看到的变量不同。

When you point to this ng-controller, that controller will be activated with a new scope associated with it

当您指向此ng控制器时，将使用与其关联的新范围激活该控制器

<div ng-repeat ng-controller="WhiteLabelSitesCtrl">
   <div ng-show="someValue"></div>
</div>

When you reference this controller again on another tag, it won't reference the existing controller as you might be expecting, it'll actually do the exact same thing... it will create the controller, and create a new scope for it- completely separate from the original one.

当你在另一个标签上再次引用这个控制器时，它不会像你期望的那样引用现有的控制器，它实际上会做同样的事情......它将创建控制器，并为它创建一个新的范围 - 与原来完全分开。

<div ng-controller="WhiteLabelSitesCtrl">
     <button ng-click="someValue = !someValue"></button>
</div>

#1