7

一组 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/

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

4

2 回答 2

3

一个快速的解决方法是创建一个指令并观察模型和 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/

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

于 2012-10-25T22:10:51.257 回答
0

input[type=range] 将模型数据类型转换为字符串，不能在 input[type=number] 中显示。

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

角度数据绑定 - 输入类型 =“数字”

于 2014-04-09T14:54:13.663 回答