ng-Show 不在 ng-repeat 中更新
ng-Show not updating inside ng-repeat
我有以下
<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。我在这里错过了什么?
ng-repeat 之外的按钮不会嵌套在同一个控制器中。它正在修改的变量可能与 WhiteLabelSitesCtrl 下的 ViewMode 正在查看的变量不同。
当您指向这个 ng-controller 时,该控制器将被激活并关联一个新的作用域
<div ng-repeat ng-controller="WhiteLabelSitesCtrl">
<div ng-show="someValue"></div>
</div>
当您在另一个标签上再次引用此控制器时,它不会像您预期的那样引用现有控制器,它实际上会做同样的事情...它会创建控制器,并创建一个它的新范围 - 与原始范围完全分开。
<div ng-controller="WhiteLabelSitesCtrl">
<button ng-click="someValue = !someValue"></button>
</div>
尝试在 ng-repeat
范围内传递对象而不是变量。相反 ViewMode
,
在您的控制器中声明:
$scope.model = {};
$scope.model.ViewMode = false;`.
并且您的绑定必须是这样的:<a class="orange " ng-show="model.ViewMode">
。之后一切正常。
阅读这篇文章以了解发生这种情况的原因:https://github.com/angular/angular.js/wiki/Understanding-Scopes
ng-repeat
为转发器中的每个项目创建一个子范围。
因此 viewmode
将是该子作用域上的原始值,因此作为原始值将失去与父作用域的继承绑定。
如果您在控制器范围内将其声明为对象 属性,那么它将成为对该父对象的引用。
$scope.mode ={ViewMode: false}
html 例子
<a class="orange " ng-show="mode.ViewMode">Upload</a></td>
问题似乎是,您需要将 ngController
指令移动到 table
级别(至少):它不能与 ngRepeat
在同一元素上如果稍后迭代控制器中定义的数组。
<table ng-controller="WhiteLabelSitesCtrl" ... >
<!-- ... -->
</table>
我有以下
<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。我在这里错过了什么?
ng-repeat 之外的按钮不会嵌套在同一个控制器中。它正在修改的变量可能与 WhiteLabelSitesCtrl 下的 ViewMode 正在查看的变量不同。
当您指向这个 ng-controller 时,该控制器将被激活并关联一个新的作用域
<div ng-repeat ng-controller="WhiteLabelSitesCtrl">
<div ng-show="someValue"></div>
</div>
当您在另一个标签上再次引用此控制器时,它不会像您预期的那样引用现有控制器,它实际上会做同样的事情...它会创建控制器,并创建一个它的新范围 - 与原始范围完全分开。
<div ng-controller="WhiteLabelSitesCtrl">
<button ng-click="someValue = !someValue"></button>
</div>
尝试在 ng-repeat
范围内传递对象而不是变量。相反 ViewMode
,
在您的控制器中声明:
$scope.model = {};
$scope.model.ViewMode = false;`.
并且您的绑定必须是这样的:<a class="orange " ng-show="model.ViewMode">
。之后一切正常。
阅读这篇文章以了解发生这种情况的原因:https://github.com/angular/angular.js/wiki/Understanding-Scopes
ng-repeat
为转发器中的每个项目创建一个子范围。
因此 viewmode
将是该子作用域上的原始值,因此作为原始值将失去与父作用域的继承绑定。
如果您在控制器范围内将其声明为对象 属性,那么它将成为对该父对象的引用。
$scope.mode ={ViewMode: false}
html 例子
<a class="orange " ng-show="mode.ViewMode">Upload</a></td>
问题似乎是,您需要将 ngController
指令移动到 table
级别(至少):它不能与 ngRepeat
在同一元素上如果稍后迭代控制器中定义的数组。
<table ng-controller="WhiteLabelSitesCtrl" ... >
<!-- ... -->
</table>