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

时间:2015-05-11 20:46:21

标签: javascript angularjs angularjs-ng-repeat angularjs-ng-show

我有以下

<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>

我在ng-repeat之外有另一个按钮来更新ViewMode变量,但是在ng-repeat内部也没有这个按钮用于ng-show而不是ng-disabled。我在这里失踪了什么?

4 个答案:

答案 0 :(得分:3)

问题似乎是,您需要将ngController指令移至table级别(至少):它不能与ngRepeat位于同一元素上如果后者迭代在控制器中定义的数组。

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

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

答案 1 :(得分:1)

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

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

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

$scope.mode ={ViewMode: false}

html示例

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

答案 2 :(得分:0)

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

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

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

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

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

答案 3 :(得分:0)

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

$scope.model = {};

$scope.model.ViewMode = false;`.

你的绑定必须是这样的:<a class="orange " ng-show="model.ViewMode">。在那之后一切正常。

阅读本文以了解其发生的原因:JerseyUriBuilder