输入[number]没有'twitter的引导

Input[number] doesn't show the value using angular & twitter bootstrap

本文关键字:twitter number 没有 输入      更新时间:2023-09-26

我的模型是在控制器上填充的,当我绑定数据时,它就像在那里一样,但是输入框是空白的。只要我输入一个值,一切正常工作。但是,如果默认值是空白,这将使我的用户非常困惑。

<div class="row" ng-controller="RangeInputCtrl">
    <div class="col-md-12">
        <label class="leftwall">
            Value:
            <input type="number" class="form-control"
                   ng-model="percentOfMax.current"
                   min="{{percentOfMax.min}}"
                   max="{{percentOfMax.max}}"
                   ng-change="changeValue()" />                
        </label>
    </div>
</div>

ng-value在这个指令中是没有用的,因为angular会劫持输入元素。如果没有最小值和最大值,代码甚至会工作得更糟糕,所以我知道它们是必需的(或者至少是必需的)。

我把输入指令包装在一个标签中,因为twitter-bootstrap 3.

(function () {
    'use strict';
    var controllerId = 'RangeInputCtrl';
    angular.module('app').controller(controllerId,['$scope', buildRangeInput]);
    function buildRangeInput($scope) {
        $scope.percentOfMax = InitCalcPercentOfMax($scope);
        $scope.changeValue = function () {
            var percentOfMax = $scope.percentOfMax;
            $scope.percentOfMax = calcPercentOfMax(percentOfMax);
        }
    }
})();

有一个函数,没有在这里发布,它接受$scope并从一个复杂对象构建初始数据结构。这里没有显示。InitCalcPercentOfMax已经过测试并按计划工作。它是外部的,由于代码重用而单独调用。

另一个函数calcPercentOfMax(percentOfMax)用于重新计算某些已被提取的指令中使用的公式(用于故障排除)。

简而言之,我一定是在某个地方做错了,我只是没有看到它。

我检查了console.log([某些表达式]),以查看数据是否不正确或曾经为空,但是percentOfMax。当前值总是至少有一个0,所以我仍然不知道我从哪里得到一个空白。

控制台没有错误。如果我输入一个<span>{{percentOfMax.current}}</span>,我在第一次加载时得到了正确的值。

该值在模型中存在,只是在输入框中为空白。

我想这是所有的细节,如果我错过了什么,我会尽快回复编辑。

根据在angular聊天室的讨论,我做了以下修改:

var d = $q.defer();
var p = d.promise;
//If I leave this off, it never resolves. So there is nothing in the directive to trigger resolve.
d.resolve(function () { 
    return InitCalcPercentOfMax($scope);
}())
$scope.percentOfMax = p.then(function (POM) {
    $scope.percentOfMax = POM;
});

我还将<span>{{percentOfMax}}</span>添加回我的视图。我可以看到承诺触发,我可以看到预期的数据是在我的precentOfMax,但输入框仍然是空的。

在有人问之前,我使用的版本是Angular.js 1.2.14,从Nuget下载

看起来应该可以工作,我的猜测是您错过了控制台上的错误,或者存在其他一些逻辑错误。这个JSBin示例是一个简化版本,它可以工作:http://jsbin.com/zumedezu/1/edit

尝试将Value:更改为Value: {{percentOfMax.current}}以输出当前值。

InitCalcPercentOfMax是否有可能在Angular之外异步执行计算?

InitCalcPercentOfMax($scope)返回.current作为字符串。CalcPercentOfMax没有修正它,但知道如何将字符串作为数字。

由于输入类型是数字,新的数值导致.current变成一个数字,所以它的值显示出来了。

花了很长时间才看到初始值被引用了