输入[number]没有'twitter的引导
Input[number] doesn't show the value using angular & twitter bootstrap
我的模型是在控制器上填充的,当我绑定数据时,它就像在那里一样,但是输入框是空白的。只要我输入一个值,一切正常工作。但是,如果默认值是空白,这将使我的用户非常困惑。
<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
变成一个数字,所以它的值显示出来了。
花了很长时间才看到初始值被引用了
- 在Twitter上用ie9中的空白src访问iframe的contentWindow
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- 通过javascript/html访问twitter共享iframe
- 使用Javascript获取Twitter访问令牌
- Twitter引导程序Typeahead-Id&标签
- 使用模式格式化Number类型输入中的值
- Twitter Bootstrap 2.1.0子菜单在Responsive上看起来很混乱
- 如何平滑地设置twitter引导程序进度条的动画
- Twitter API在jQuery AJAX中设置授权头
- 更改 Twitter Typeahead 返回的内容
- 在Twitter BootStrap嵌套下拉列表中托管一个选择列表(IE 9特定)
- Twitter API JSON调用未获得最新的3条推文
- Twitter应用程序专用身份验证
- Twitter是如何在文本框中添加标签的
- Twitter嵌入的时间轴小部件
- AngularJS {{ val | number:1 }} 不四舍五入到小数点后 1 位
- angular type=[number]指令来阻止粘贴
- Twitter引导程序在下拉列表打开时停止传播
- Twitter登录的弹出窗口
- 输入[number]没有'twitter的引导