码:
<input type="text" ng-modal="name" />
{{name}}
当我输入内容时input,以下内容{{name}}会立即更改.是否能够配置它只name在我输入所有字符并保留输入后更新？
结合ng-changed和ng-blur的最简单方法是什么？
我发现这篇文章:如何让ng-model不立即更新？
然而,这不再适用于angluar 1.2+有没有办法实现相同的行为？
我想我必须自己存储一个旧值的副本,并将新值与模糊值进行比较,如果我尝试做同样的事情,或者有更简单的方法吗？
我有一个带ngModel绑定的文本框,如下所示:
<input type="text" ng-model="typing" />
和这个texbox的价值
value: {{ typing }}
我希望模型延迟在我输入时更新值.也许如果我停止输入500ms,模型将更新所有值(我在文本框中键入的所有内容).我做了一些谷歌,但没有运气.安永有什么想法？请帮忙.
编辑
这个Angularjs:input [text] ngChange在值发生变化时触发,不能为我的情况提供解决方案.它会在模糊后带来解决方案更新值,但我希望在停止输入后更新值,而不是模糊文本框.
编辑2(答案)
对于角度版本1.4,指令ngModelOptions在我的情况下很有用.我可以像这样编写,<input ng-model="typing" ng-model-options="{ updateOn: 'default', debounce: {'default': 500, 'blur': 0} }" />将更新值延迟到默认的500ms模型,如果丢失焦点则立即更新.
我有一个用于搜索的输入字段:
<input id="search_input" type="text" ng-model="filter.search_terms">
我还使用了许多其他过滤器(复选框,收音机等),我在过滤器上有一个$ watch,所以任何更改都会触发搜索.问题是我不希望每次输入一个字母时都要搜索文本字段,只希望只有在按Enter键时才将其"保存"在filter.search_terms上.
是否有一种简单的方法可以执行此操作,还是必须删除ng-model并使用将其设置为输入的功能进行ng-click？
通常,每次用户按下键时,ng-model都会更新绑定模型:
<input type="text" ng-model="entity.value" />
这在几乎所有情况下都很有效.
但是当onchangeup/onkeydown事件发生时,我需要它来更新onchange事件.
在旧版本的角度中,有一个ng-model-instant指令,它与ng-model现在一样工作(至少对于用户来说 - 我对它们的实现一无所知).因此,在旧版本中,如果我刚刚给出了ng-model,它就是更新模型onchange,当我指定ng-model-instant时,它正在更新模型onkeypup.
现在我需要ng-model用于元素的"更改"事件.我不希望它是即时的.这样做最简单的方法是什么？
编辑
输入仍然必须反映模型的任何其他更改 - 如果模型将在其他位置更新,则输入的值应反映此更改.
我需要的是让ng-model指令像在旧版本的angularjs中一样工作.
以下是我正在尝试做的解释:http: //jsfiddle.net/selbh/EPNRd/
有了Knockout,我可以说
<html>
<head>
<script type="text/javascript" src="knockout-2.1.0.js"></script>
</head>
<body>
<input type="text" data-bind="value: a"></input> +
<input type="text" data-bind="value: b"></input> =
<span data-bind="text: result"></span>
<script type="text/javascript">
function ExampleViewModel() {
this.a = ko.observable(5);
this.b = ko.observable(6);
this.result = ko.computed(function() {
return parseInt(this.a()) + parseInt(this.b());
}, this);
}
ko.applyBindings(new ExampleViewModel());
</script>
</body>
</html>
并且result每次a和b改变时都会重新计算.我怎样才能让AngularJS为我做这个？我试过了
<html ng-app>
<head>
<script type="text/javascript" src="angular-1.0.1.min.js"></script>
<script type="text/javascript">
function ExampleCtrl($scope) {
$scope.a = 5;
$scope.b = 6;
$scope.result = function() {
return this.a + this.b
};
}
</script>
</head> …我已经从角度1.0.8迁移到了昨天的角度1.2.2,除了一堆其他被破坏的东西,我已经修复了,以下指令中的$ render函数不再触发.
有没有人在这之前唠叨这种行为？0
directive('validFile', function (utils, $filter) {
return {
require: 'ngModel',
link: function (scope, el, attrs, ngModel) {
if(utils.isMobileAgent())
return;
var form = el.parents().find('form');
ngModel.$render = function () {
debugger;
if(form.hasClass('ng-pristine'))
return;
if(el.val() && el.val().length > 0){
ngModel.$setViewValue(el.val());
}
if(el.hasClass('ng-invalid')){
el.parent().addClass('ng-invalid').addClass('ng-invalid-required');
ngModel.$setValidity(attrs.name, false);
ngModel.$setPristine(attrs.name, false);
scope.fileMsg = $filter('translate')('PLEASESELECT') + ' ' + $filter('translate')(attrs.name);
// scope.layout.showFileError = true;
}
else{
el.parent().removeClass('ng-invalid').removeClass('ng-invalid-required').addClass('ng-valid');
ngModel.$setValidity(attrs.name, true);
}
};
el.bind('mouseover', function(){
if(form.hasClass('ng-dirty') && el.parent().hasClass('ng-invalid'))
el.removeClass('ng-pristine');
});
el.bind('mouseleave', function(){
if(el.val() && el.val().length > 0){
el.addClass('ng-pristine'); …