Question

所以我有一个名为“show more”的按钮，一旦达到我希望更改为名为“show less”的按钮的列表的最大数量，它将增加列表中的项目数量，这会将列表返回给它默认值。

我使用ng-if确定要显示的按钮和ng-click以确定操作。当它们一起使用时，ng-click停止工作，当我点击时没有任何反应。

这里是我用jade编写的html，feedLimit是列表中显示的项目数。

button.btn.btn-primary.btn-block.btn-sm.btn-outline(type='button')(ng-if= "feedLimit < notifications.all.length", ng-click="feedLimit = feedLimit + 4")
  span(translate) Show More
button.btn.btn-primary.btn-block.btn-sm.btn-outline(type='button')(ng-if= "feedLimit >= notifications.all.length", ng-click="feedLimit = 4")
  span(translate) Show Less

我尝试过使用ng-show和ng-hide，它们工作正常，但最好使用ng-if，没有动画，而且速度更快。

这是show more button的html输出

<button type="button" ng-if="feedLimit < notifications.all.length" ng-click="feedLimit = feedLimit + 4" class="btn btn-primary btn-block btn-sm btn-outline ng-scope" style=""><span class="ng-scope">Show More</span></button>

Answer 1

我认为你遇到了angularjs和子范围继承的常见问题。

您是对原始值的数据绑定，而ng-if正在创建子范围。当您的ng-click指令更改了＆＃39; feedLimit＆＃39;的值时，您实际上是在创建一个新的＆quot; feedLimit＆＃39;子范围的属性，但ng-if指令绑定到＆＃39; feedLimit＆＃39;父范围。

解决方案是避免绑定到原始值。而是确保通过绑定到对象来使用点符号。

而不是

<button ng-if="feedLimit < notifications.all.length" ng-click="feedLimit = feedLimit + 4">

尝试类似

的内容

<button ng-if="someObj.feedLimit < notifications.all.length" ng-click="someObj.feedLimit = someObj.feedLimit + 4">

以下是对最新情况的更详细解释。

https://github.com/angular/angular.js/wiki/Understanding-Scopes

范围继承通常是直截了当的，你通常不会   甚至需要知道它正在发生......直到你尝试双向数据绑定   （即表格元素，ng-模型）到基元（例如，数字，字符串，   boolean）在子范围内从父范围定义。它   没有像大多数人期望的那样工作。怎么了   是孩子范围得到自己的隐藏/阴影的属性   同名的父属性。这不是AngularJS的内容   做 - 这就是JavaScript原型继承的工作原理。新   AngularJS开发人员通常没有意识到ng-repeat，ng-switch，   ng-view和ng-include都创建了新的子范围，所以问题就出现了   经常出现涉及这些指令的时候。（见这个例子   为了快速说明问题。）

通过遵循以下内容，可以轻松避免使用原语这个问题   ＆＃34;最佳实践＆＃34;总是有一个＆＃39;。在您的ng模型中

使用ng-if时，ng-click停止工作

1 个答案: