当前位置: 首页 > 面试题库 >

不要使用ng-model记录无效值

公西星海
2023-03-14
问题内容

我真的很喜欢ng-
model属性如何直接绑定到我的模型,并且用户可以立即获得有关其更改的反馈。对于我的用例来说,这是完美的。但是,我不希望将无效值放入模型中,因为它们可能会在计算中使用扳手。我以某种方式希望仅在表单控件中的值有效时才更新模型。对于无效值,可以在模型值保持固定的同时更改控制值。

如果我更改角度(1.2rc)NgModelController的$ setViewValue实现的来源:

this.$setViewValue = function(value) {
...
  if (this.$modelValue !== value) {
    this.$modelValue = value;
    ...
  }
};

对此:

this.$setViewValue = function(value) {
...
  if (this.$modelValue !== value && this.$valid) {
    this.$modelValue = value;
    ...
  }
};

它似乎完全可以满足我的要求,但是我不知道如何以正确的方式进行操作。改变这种行为的正确方法是什么?还是我的尝试因某种原因注定要失败?

更新:添加了示例。

例如,查看http://jsfiddle.net/FJvgK/1/ HTML:

<div ng-controller="MyCtrl">
    {{validNumber}}
    <form>
        <input 
            type="number"
            ng-model="validNumber"
            required
            min="10"
            max="20" 
        />
    </form>
</div>

和JS:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.validNumber = 15;
}

该数字可以正确显示10到20之间的值,但是我想要它,以便如果您突然在框中输入“ 8”,或者删除第二个数字而保留“
1”,则最后一个有效数字仍会显示在上方。也就是说,即使控件没有,模型始终具有有效值。


问题答案:

我相信如果传递的值无效,则AnugularJS验证程序的默认行为是不更新模型。如果您查看开发人员指南并仔细查看Custom Validation这些示例,则还表明该模型未更新或因UI中提供的无效值而被清除



 类似资料:
  • 问题内容: 这里的PLUNKR示例 我正在使用某种形式的jquery autocomplete作为angularjs direcitve。当jquery使用angular 更新输入的值时,直到下一个摘要(我想)之后才注意到更改。 我的第一个想法是使用来对后摘要执行操作,但是如您所见,它没有帮助。 我的第二种方法是重写该元素的功能以触发事件,但是我没有设法使其起作用。 尝试从自动完成列表中选择一个值

  • 问题内容: 我正在使用ng-disabled,我喜欢它。输入和按钮对我来说很好。对于锚标签不起作用。我该如何解决? 问题答案: 没有超链接的禁用属性。你可以这样做:

  • 问题内容: 我有这个reprohttp://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq,当我单击“ Title3”并在文本框中输入一个值时显示,尽管输入的值显示在UI中,当我单击“单击”按钮时,什么也没有绑定到范围属性$ scope.test。 我不知道ng-switch有什么问题,或者我做错了什么。帮助表示赞赏!!! http://embed.plnkr.co/nVC

  • 问题内容: 这是显示问题的小提琴。http://jsfiddle.net/Erk4V/1/ 如果我在ng-if内部有一个ng-model,就会出现该模型无法正常工作的情况。 我想知道这是一个错误还是误解了正确的用法。 问题答案: 与其他指令一样,该指令将创建子范围。请参见下面的脚本(或此jsfiddle) 因此,您的复选框将更改子作用域的内部,而不更改外部父作用域。 请注意,如果要修改父作用域中的

  • 问题内容: AngularJS的两个绑定不适用于div。我希望我的div是可编辑的,但是没有发生。有人可以建议出什么问题吗?相同的绑定在文本框中也可以正常工作。这是我的代码: 问题答案: 请尝试此操作,它可能会有所帮助 https://github.com/angular/angular.js/issues/528 这是一个3岁的未解决问题,很多人希望解决。它被标记为和,而不是错误。鉴于Angul

  • 本文向大家介绍Angular.JS利用ng-disabled属性和ng-model实现禁用button效果,包括了Angular.JS利用ng-disabled属性和ng-model实现禁用button效果的使用技巧和注意事项,需要的朋友参考一下 前言 本文要实现的效果是在输入框内无文字时,提交button是不能点击状态,在输入文字后会变为可点击状态,效果图如下: 实现方法: controller