Question

考虑这个简单的例子（作为jsFiddle here提供）：

HTML

<div ng-controller="MainCtrl as mainCtrl">
    <form>
        <input 
            type="range" 
            ng-model="mainCtrl.range.value" 
            ng-attr-min="mainCtrl.range.min" 
            ng-attr-max="mainCtrl.range.max" />
    </form>
    <div>{{mainCtrl.range.min}} -- {{mainCtrl.range.value}} -- {{mainCtrl.range.max}}</div>
</div>

的JavaScript

angular.module('AngularTestApp', [])
.controller('MainCtrl', [function () {
    var self = this;
    self.range = {
        min: 0,
        max: 10,
        value: 3
    };
}]);

将滑块一直向右滑动会产生100的值，远远超过滑块应设置的最大值10。为什么？如何通过AngularJS绑定以编程方式设置HTML滑块的最大值？

（N.B。有一个开放的AngularJS错误ng-model does not set initial value and position of input[type=range] #6726，但这是关于设置滑块的初始值，这在我的代码中工作正常。）

Answer 1

答案在Blackhole和sqiroid对问题的评论中，但我也会将它们拉出来，以便问题无法回答。

这是一个简单的例子，我错过了双花括号。代码应为：

<强> HTML

<div ng-controller="MainCtrl as mainCtrl">
    <form>
        <input 
            type="range" 
            ng-model="mainCtrl.range.value" 
            ng-attr-min="{{mainCtrl.range.min}}" 
            ng-attr-max="{{mainCtrl.range.max}}" />
    </form>
    <div>{{mainCtrl.range.min}} -- {{mainCtrl.range.value}} -- {{mainCtrl.range.max}}</div>
</div>

sqiroid提供了修订后的JSFiddle here。

我发现很难判断何时使用双花括号;在我的原始代码中，ng-model对ng-attr-min和ng-attr-max都有不同的要求，这对我来说并不明显。在对原始问题的进一步评论中，Blackhole提供了一些有用的经验法则，用于判断何时可能需要双花括号（或不需要）：

如果HTML属性的值无法设置AngluarJS模型的值，则该属性通常需要一个值而不是表达式，因此应该使用双花括号。
如果在没有变量的情况下使用该属性是无用的（例如，ngClass），则提供表达式而不是值，即不要使用双花括号。

但Blackhole继续强调一个人应该＆＃34;总是看文档以确保＆＃34;。

为什么HTML滑块没有选择ng-attr-max？

1 个答案: