Question

一组HTML输入控件绑定到testVar：

<div ng-app>
    <div ng-controller="TestCtrl">
        <input type="text" ng-model="testVar">
        <input type="number" min="1" max="10" ng-model="testVar">
        <input type="range" min="1" max="10" ng-model="testVar">
        <button ng-click="testVar = 5">set to 5</button>              
    </div>
 </div>

最初所有输入控件都按预期显示此值，但是当通过type =“range”或type =“text”输入更改testVar时，type =“number”输入变为空白。以编程方式设置testVar的值会产生预期的行为：所有输入都显示更新的值。

这个简单的案例证明了这个问题：http://jsfiddle.net/7cbYp/

为什么会发生这种情况，如何解决？

Answer 1

快速解决方法是创建指令并监视模型和HTML项目本身的更改

HTML

<input type="number" min="1" max="10" fix="testVar">

JS

var App = angular.module('App', []);
App.directive('fix', function(){
    return{
        link: function(scope, elem, attrs){
            scope.$watch(attrs.fix, function(v){
                if(typeof v === 'string') v = parseInt(v, 10);
                elem.val(v);
            });
            elem.bind('change', function(){ 
                scope[attrs.fix] = elem.val(); 
                scope.$digest();
            });
        }
    };
});

我只在Chrome上测试过，但它确实有用。

jsfiddle：http://jsfiddle.net/jaimem/HLnqt/3/

注意：必须有更简洁的方法来执行此操作。

Answer 2

input [type = range]将model数据类型转换为string，不能在input [type = number]中显示。

此处的解决方案存在类似问题。

Angular Data Binding - Input type="number"

为什么type =“number”的输入没有显示其绑定值的更新？

2 个答案: