使用ng if访问对象属性

Question

我正在尝试使用ng-if禁用或启用基于按钮的功能。

第一个ng-if按照我的预期工作，如果页面不大于1，它将禁用按钮。

第二个ng-if起作用，因为它不会禁用按钮，但单击按钮不会增加变量page，或者如果增加了，则更改不会反映在文本中。

我点击它时没有错误。

这与s.pages.length的比较有关吗？

<div ng-repeat="s in scripts track by $index">
<div ng-click=''>
<b>Name</b>: <input type="text" ng-model="scriptNames[$index]"  size="10" /> <input type="button" value='Rename' ng-click='renameScript($index)'/>
</br>
<b>Preview</b>: <textarea ck-editor class="ckeditor" ng-model="s.pages[page].versions[0]" value="{{s.pages[page].versions[0]}}" ></textarea>
</br>
<span ng-if="page > 1">
<input type="button" value='previous page' ng-click='page = page - 1'/>
</span>
{{page+1}}
<span ng-if="page < s.pages.length">
<input type="button" value='next page' ng-click='page = page + 1'/>
</span>
</br>
<input type="button" value='Save Edits' ng-click='updateScript($index)'/>
</br>
</br>
<input type="button" value='Delete Script' ng-click='deleteScript($index)'/>
</div>
</div>

下面是另一个发生意外的例子。我可以增加页面，但不能减少页面。

这是下面的代码直接在上面的代码之上。它们都在访问同一个变量。我不确定这是否会引起问题。

<textarea ck-editor class="ckeditor" ng-model="script[page]" value="{{script[page]}}"  rows='10' cols='80'></textarea>
<span ng-if="page+1 > 1">
<input type="button" value='previous page' ng-click='page = page - 1'/>
</span>
{{page+1}}
<input type="button" value='next page' ng-click='page = page + 1'/>
</br>
<input type="button" value='Submit script' ng-click='submitScript()'/>

Answer 1

ngIf创建另一个作用域。因此，您必须访问$parent上的page属性。。。

<input type="button" value='previous page' ng-click='$parent.page = $parent.page - 1'/>

Jsbin。。。http://jsbin.com/beguhoxo/1/edit?html，js，输出