Question

我有这个输入：

<input type="range" min="20" max="100" id="labelWidth" ng-change="widthRangeChange()" ng-model="labelWidth" list="widthsettings"/>

及其数据主义者：

<datalist id="widthsettings">
    <option>20</option>
    <option>33</option>
    <option>40</option>
    <option>50</option>
    <option>60</option>
    <option>66</option>
    <option>80</option>
    <option>90</option>
    <option>100</option>
</datalist>

用户可以选择他想要的值在20到100之间，但我希望用户只能选择datalist中提出的值。我怎么能这样做？

（我正在使用angularJS）

Answer 1

以下是如何实现这一目标的示例：

<input type="range" min="{{ widthsettings[0] }}" max="{{ widthsettings[widthsettings.length-1] }}" id="labelWidth" ng-change="widthRangeChange()" ng-model="labelWidth" list="widthsettings"/>

{{ labelWidth }}

<datalist id="widthsettings">
    <option ng-repeat="setting in widthsettings">{{ setting }}</option>
</datalist>

控制器：

var old;

$scope.widthsettings = [
    20, 33, 40, 50, 60, 66, 80, 90, 100      
];

old = $scope.widthsettings[0]; // default

$scope.widthRangeChange = function(){
    console.log("changed");
    var index = $scope.widthsettings.indexOf(old);
    if($scope.labelWidth > old) {
        if(index <= $scope.widthsettings.length)
            index++; 
        $scope.labelWidth = $scope.widthsettings[index];
        old = $scope.labelWidth;
    }
    else if($scope.labelWidth < old) {
        if(index > 0)
            index--;
        $scope.labelWidth = $scope.widthsettings[index];
        old = $scope.labelWidth;
    }
}

JSFIDDLE

你可能会将它包装在一个更有意义的指令中。

将输入类型范围限制为特定的数据列表值

1 个答案: